Number Field
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/number-field
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react
Anatomy
import { NumberField, NumberInput } from "@/components/ui/number-field"
import { Label, Description, FieldError } from "@/components/ui/field"
<NumberField>
<Label/>
<NumberInput />
<Description />
<FieldError />
</NumberField>Examples
Controlled
Pass value and update it with onChange to control the number field.
Uncontrolled
Use defaultValue to set the initial value of an uncontrolled field.
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.
Component API
NumberField
NumberField extends the React Aria Components <NumberField> component.
classNamestringNumberInput
NumberInput extends the React Aria Components <Input> component.
classNamestringSee the React Aria for the full API reference.
