Number Field
Numeric input with increment and decrement buttons and optional scrub area
Preview
Installation
Usage
Examples
Controlled
Manage number field state externally.
Current value: 50
Min / Max
Constrain the value within a range.
Formatted Display
Format the value as currency, percentage, or other number formats.
Scrub Area
Click and drag to change the value interactively.
Disabled
Prevent interaction with disabled number fields.
Form Integration
Use Field for labeling and form participation. See the Forms guide for more patterns.
API Reference
The Number Field component is built on top of Base UI's Number Field. All Base UI props are supported. The documentation below only covers the sub-components available.
For the complete Base UI API, see the Base UI Number Field documentation.
Sub-components
NumberField
Groups all parts and manages state. Renders a <div> element. Accepts defaultValue, value, onValueChange, min, max, step, format, name, required, disabled, readOnly, and all other Base UI Number Field Root props.
NumberFieldGroup
Groups the input with increment and decrement buttons. Renders a <div> element.
NumberFieldInput
The numeric input control. Renders an <input> element.
NumberFieldIncrement
Button that increases the value when clicked. Renders a <button> element.
NumberFieldDecrement
Button that decreases the value when clicked. Renders a <button> element.
NumberFieldScrubArea
An interactive area where the user can click and drag to change the value. Renders a <span> element.
NumberFieldScrubAreaCursor
A custom cursor element displayed while scrubbing. Renders a <span> element.