Number Input
Numeric field with increment and decrement steppers. Compact by default; pass fullWidth to stretch it.
Basic
Step and range
step sets the increment; min and max clamp both the steppers and typed input.
Sizes
The same sm / md / lg heights as Input.
Empty with a placeholder
Without a defaultValue the field starts empty and shows its placeholder. fullWidth stretches it to its container.
States
Disabled and invalid. disabled dims the whole field, steppers included, and blocks input.
Inside a FormField
- Arrow keys step the value; Page Up and Page Down step by a larger amount
API reference
Accessible name for the number field. Required when there is no visible `<label>` for it.
Identifies the element (or elements) that labels the current element.
Stretches to the width of its container. Default false - a number field's value is usually short, so it's compact by default rather than stretching to match a nearby text field.
Paints the error state. Pair with `FormField`'s `error` for the message.
Text shown while the field is empty.
Control height, matching `Input` at the same value.
Also accepts everything from Omit<React.ComponentPropsWithoutRef<typeof import("@base-ui/react/number-field").NumberField.Root>, "render">.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent