Number field
A number input with stepper buttons, wrapping the Base UI Number Field. Keyboard stepping, hold-to-repeat, and min/max clamping come from the foundation.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
Bordered is the default; borderless trades the border for a muted fill, the same surface as a secondary button.
States
The steppers disable themselves at min and max (the first one sits at its minimum). Disabled and invalid are the ones you set; invalid turns the border, ring, and hint to the danger color.
Styling states
The root carries data-invalid and the parts carry data-disabled, so custom styling never needs JavaScript:
.ub-number-field[data-invalid] .ub-number-field-group {
border-color: var(--ub-danger);
}Props
Everything the Base UI Number Field root accepts (min, max, step, largeStep, value, onValueChange, disabled, ...), plus:
| Prop | Type | Default | Description |
|---|---|---|---|
min / max / step | number | – | The bounds and the stepper increment; arrow keys use the same step. |
largeStep | number | 10 | The Shift plus arrow and Page Up and Page Down increment. |
variant | "default" | "borderless" | "default" | Bordered, or a muted fill with no border. |
size | "default" | "compact" | "default" | Default is 36px tall with 16px text; compact is 28px with 14px text. |
invalid | boolean | false | Danger border, ring, and hint, plus aria-invalid; a surrounding Field sets it automatically. |
hint | ReactNode | – | Helper text below the field, linked via aria-describedby. |
placeholder | string | – | Placeholder for the inner input. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
NumberField, from @usebones/react.
- One component; steppers and input render automatically. min, max, step, largeStep, defaultValue, value + onValueChange, and disabled pass through to the root.
- variant "default" | "borderless"; size "default" | "compact"; invalid; hint (aria-describedby); placeholder.
- Inside FieldRoot, drop invalid and hint and use FieldLabel, FieldDescription, and FieldError instead.
- Restyle in CSS via [data-invalid] on .ub-number-field and [data-disabled] on the parts (.ub-number-field-input, .ub-number-field-step). Tokens only.