Component

NumberField

A numeric input with increment and decrement controls. Supports min, max, step, and controlled/uncontrolled modes.

preview

React
"use client"

import NumberField from "@radui/ui/NumberField"

const NumberFieldExample = () => {
    return (
        <div className="flex flex-col gap-4">
            <NumberField.Root defaultValue={5} step={1} min={0} max={100} largeStep={5}>
                <NumberField.Decrement aria-label="Decrease quantity">−</NumberField.Decrement>
                <NumberField.Input aria-label="Quantity" />
                <NumberField.Increment aria-label="Increase quantity">+</NumberField.Increment>
            </NumberField.Root>
        </div>
    )
}

export default NumberFieldExample

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to the number input. Increment and decrement buttons are pointer controls and stay out of the tab order.
`ArrowUp`	Increments the current value by step when focus is on the input. Shift plus ArrowUp uses largeStep.
`ArrowDown`	Decrements the current value by step when focus is on the input. Shift plus ArrowDown uses largeStep.
`PageUp`	Increments the current value by largeStep.
`PageDown`	Decrements the current value by largeStep.
`Home`	Sets the value to min when min is defined.
`End`	Sets the value to max when max is defined.

ARIA References

Reference	What Rad UI follows
Spinbutton pattern	Uses the native number input spinbutton behavior. name, required, disabled, and readOnly are forwarded to the input, while min, max, and step are forwarded as native constraints. Stepped values are clamped immediately; typed values are clamped on blur or Enter.

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import NumberField from "@radui/ui/NumberField"

export default () => {
    return (
        <NumberField.Root>
            <NumberField.Decrement />
            <NumberField.Input />
            <NumberField.Increment />
        </NumberField.Root>
    )
}

Root

The root NumberField component.

Prop	Type	Default
value	number	--
defaultValue	number \| ''	''
min	number	--
max	number	--
step	number	1
largeStep	number	step * 10
name	string	--
readOnly	boolean	false
required	boolean	false
disabled	boolean	false
onValueChange	(value: number \| '') => void	--