Number Field
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A numeric input element with increment and decrement buttons, and a scrub area.
Overview
Use Number Field when users need to enter or adjust a numeric value.
Number Field is useful for quantities, limits, prices, percentages, durations, counts, and settings where incrementing or decrementing is helpful.
Anatomy
A number field has an input, value, increment and decrement controls, optional scrub area, range constraints, step size, and formatted display.
Behavior
Set sensible minimum, maximum, and step values. Use formatting when the number represents currency, percent, units, or other structured values.
Accessibility
Provide a label and make sure the increment and decrement controls have accessible names. Keep typed input available for keyboard users.
Installation
npx honestui@latest add 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>Examples
Our examples cover sizes, disabled state, external labels, scrub input, ranges, formatting, step values, and form integration.
For accessible labelling and validation, prefer using the Field component to wrap number fields. See the related example: Number field.