Number Field
A numeric input element with increment and decrement buttons, and a scrub area.
A numeric input element with increment and decrement buttons, and a scrub area.
import {
NumberField,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
NumberFieldScrubArea,
} from "@/components/ui/number-field";
import { Label } from "@/components/ui/label";<NumberField defaultValue={0} id="quantity">
<NumberFieldScrubArea>
<Label htmlFor="quantity">Quantity</Label>
</NumberFieldScrubArea>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>If you want to allow the user to scrub the input value with mouse wheel, you can pass allowWheelScrub={true} prop to NumberField component while focused on the input.
<NumberField
allowWheelScrub
>
// rest of the code
</NumberField>You can pass min and max props to NumberField component to set the range of the input value.
You can pass step prop to NumberField component to set the step of the input value.