The NumberField component provides a specialized input for numeric values with built-in increment/decrement controls and mouse scrubbing.
Installation
import {
NumberFieldRoot,
NumberFieldGroup,
NumberFieldInput,
NumberFieldIncrement,
NumberFieldDecrement,
NumberFieldScrubArea,
NumberFieldScrubAreaCursor,
} from "@craftdotui/baseui/components/number-field";
<NumberFieldRoot>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberFieldRoot>
Components
NumberFieldRoot
Callback when value changes.
NumberFieldInput
Size variant. Options: xs, sm, md, lg, xl
NumberFieldIncrement
Button to increment the value.
NumberFieldDecrement
Button to decrement the value.
NumberFieldScrubArea
Interactive area for mouse scrubbing to change values.
NumberFieldScrubAreaCursor
Cursor icon shown during scrubbing.
Examples
Basic Number Field
<NumberFieldRoot defaultValue={5}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberFieldRoot>
With Range and Step
<NumberFieldRoot min={0} max={100} step={5} defaultValue={50}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberFieldRoot>
With Scrub Area
<NumberFieldRoot>
<NumberFieldScrubArea>
<NumberFieldScrubAreaCursor />
Value:
</NumberFieldScrubArea>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberFieldRoot>
Controlled
const [value, setValue] = useState(10);
<NumberFieldRoot value={value} onValueChange={setValue}>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberFieldRoot>
Accessibility
- Built on @base-ui/react for ARIA support
- Keyboard navigation (Arrow Up/Down, Page Up/Down)
- Screen reader announcements
- Increment/decrement buttons are keyboard accessible
- Proper min/max constraints