Number Field

Forms

A numeric input with increment and decrement steppers.

Number fields accept typed numbers and can be nudged with the +/− steppers on the right. Values are clamped to the min/max range and snapped to the step.

npx shadcn@latest add number-field

Basic usage

Compose the input with its two stepper buttons inside a group.

Preview

Live

Value: 4

tsx

1const [value, setValue] = useState(4)
2
3<NumberField value={value} onValueChange={setValue} min={1} max={10} step={1}>
4  <NumberFieldGroup>
5    <NumberFieldInput />
6    <div className="absolute inset-y-0 right-0 flex w-7 flex-col border-l border-input">
7      <NumberFieldIncrement />
8      <NumberFieldDecrement />
9    </div>
10  </NumberFieldGroup>
11</NumberField>

Uncontrolled

Pass defaultValue and let the field manage its own state.

Preview

Live

tsx

1<NumberField defaultValue={10} min={0} max={100} step={5}>
2  <NumberFieldGroup>
3    <NumberFieldInput />
4    <div className="absolute inset-y-0 right-0 flex w-7 flex-col border-l border-input">
5      <NumberFieldIncrement />
6      <NumberFieldDecrement />
7    </div>
8  </NumberFieldGroup>
9</NumberField>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	number \| null	The controlled value.
defaultValue	number	The uncontrolled initial value.
onValueChange	(value: number \| null) => void	Called when the value changes.
min	number	The minimum value.
max	number	The maximum value.
step	number= 1	The increment between valid values.