blue
View on GitHub

Number Input

A number input allows users to enter numeric values, providing controls like step increment, validation and range limits.

Usage

Light
Blue
Zoho Puvi 
<script>
	import { NumberInput } from 'deskblocks';
</script>

<NumberInput placeholder="Enter a numeric value" />

Mandatory input

Light
Blue
Zoho Puvi 
<script>
	import { NumberInput, FormLabel } from 'deskblocks';
</script>

<div>
	<FormLabel required for="inp-demo">Label</FormLabel>
	<NumberInput required value={42} id="inp-demo" />
</div>

Input with icon

Pass the Icon component within the left or right slot to render it on the left or right side, respectively.

Light
Blue
Zoho Puvi 
<!-- Left Icon -->
<NumberInput value={15}>
	<Icon slot="left-icon" icon={IconActivity} />
</NumberInput>

<!-- Right Icon -->
<NumberInput value={15}>
	<Icon slot="right-icon" icon={IconActivity} />
</NumberInput>

Help message

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { NumberInput } from 'deskblocks';
</script>

<div>
	<NumberInput value={42}>
		<span slot="help-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</NumberInput>
</div>

Invalid state

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { NumberInput } from 'deskblocks';
</script>

<div>
	<NumberInput invalid value={42}>
		<span slot="error-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</NumberInput>
</div>

Disabled state

Light
Blue
Zoho Puvi 
<NumberInput disabled value={15} step={5} />

Min and max values

Light
Blue
Zoho Puvi 
<script>
	import { NumberInput } from 'deskblocks';
</script>

<NumberInput value={16} min={12} max={18} />

Increments

Light
Blue
Zoho Puvi 
<script>
	import { NumberInput } from 'deskblocks';
</script>

<NumberInput value={15} step={5} />

Props

id string undefined Specifies a unique identifier for the input field.
value number undefined Sets the current value of the input field.
placeholder string undefined Provides a placeholder text that appears when the input is empty.
min string | number undefined Defines the minimum value allowed for the input field.
max string | number undefined Defines the maximum value allowed for the input field.
step string | number undefined Specifies the increment step for numeric values.
name string undefined Assigns a name to the input field, useful for form submissions.
disabled boolean false Disables the input field, preventing user interaction.
invalid boolean false Marks the input field as invalid, typically used for form validation.
required boolean false Indicates that the input field is required before form submission.
readonly boolean false Makes the input field read-only, preventing user modifications.
class string undefined Custom CSS class name for additional styling.

Slots

Events