Number Field
A numeric input field that allows users to enter and edit numbers, with features like validation, step controls, and range limits. It supports min/max values.
Basic
A field specifically designed for entering numeric values.
Installation
npx shadcn@latest add @intentui/number-fieldComposed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
npm i react-aria-componentsAnatomy
import { NumberField, NumberInput } from "@/components/ui/number-field"
import { Label, Description, FieldError } from "@/components/ui/field"
<NumberField>
<Label/>
<NumberInput />
<Description />
<FieldError />
</NumberField>Controlled
You can use the number field as a controlled component by managing its state externally.
Uncontrolled
Like other fields, the search field can be controlled by managing its value through the defaultValue prop.
Validation
The field is in an error state, usually caused by invalid input. Try submitting the form without filling it out to see the error state in action.
Disabled
The field is disabled and cannot be interacted with.