Number Field
Allows users to enter numeric values or adjust them step-by-step using increment and decrement buttons or keyboard arrow keys.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-number-fieldUsage
import {
NumberField,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
NumberFieldScrubArea,
} from '@/components/ui/number-field'<NumberField defaultValue={0}>
<NumberFieldScrubArea label="Quantity" />
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>Anatomy
<NumberField>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberField>Features
Stepper Buttons
Number field equipped with increment and decrement stepper controls.
Disabled State
Number field rendered in a disabled state.
Accessibility
- Follows the WAI-ARIA Spinbutton Pattern.
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowUp | Increments the numeric value by the defined step. |
| ArrowDown | Decrements the numeric value by the defined step. |
| Home | Sets the value to the minimum limit (if specified). |
| End | Sets the value to the maximum limit (if specified). |
API Reference
NumberField
Root component. Styled wrapper for NumberField.Root from Base UI.
| Prop | Type | Default | Description |
|---|---|---|---|
size | sm|default|lg | default | Controls the size of all child components via context |
NumberFieldGroup
Container for the input and buttons. Styled wrapper for NumberField.Group from Base UI.
NumberFieldInput
Input element for the number value. Styled wrapper for NumberField.Input from Base UI.
NumberFieldIncrement
Button to increment the value. Styled wrapper for NumberField.Increment from Base UI with plus icon.
NumberFieldDecrement
Button to decrement the value. Styled wrapper for NumberField.Decrement from Base UI with minus icon.
NumberFieldScrubArea
Draggable area for scrubbing the value. Styled wrapper for NumberField.ScrubArea from Base UI.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label text displayed in the scrub area |