Number Input
A labeled <input type="number"> with +/− stepper buttons. The initial value renders correctly in SSR; steppers become interactive with a JS event listener or the NumberInput island.
Default
<NumberInput label="Quantity" placeholder="Enter a number" />With value and bounds
<NumberInput
label="Age"
value={25}
min={0}
max={120}
step={1}
/>Description & error
Maximum number of items to display
Price must be greater than 0
<NumberInput
label="Max items"
description="Maximum number of items to display"
value={10}
min={1}
/>
<NumberInput
label="Price"
withAsterisk
error="Price must be greater than 0"
value={0}
min={0}
/>Size
<NumberInput size="xs" label="Extra small" />
<NumberInput size="sm" label="Small" />
<NumberInput size="md" label="Medium" />
<NumberInput size="lg" label="Large" />
<NumberInput size="xl" label="Extra large" />Disabled
<NumberInput label="Disabled input" value={42} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | children | — | Field label rendered above the input |
description | children | — | Helper text below the label |
error | children|boolean | — | Error message or true for styles only |
value | number | — | SSR value snapshot |
min | number | — | Minimum value; disables decrement at lower bound |
max | number | — | Maximum value; disables increment at upper bound |
step | number | 1 | Increment/decrement step |
placeholder | string | — | Placeholder text |
disabled | boolean | — | Disables the input and stepper buttons |
required | boolean | — | Marks the field required |
withAsterisk | boolean | — | Shows asterisk without setting native required |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size and height |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Corner radius |
name | string | — | Form field name |
id | string | — | Associates label with input via for/id |