NumberField

Name: Rad UI
Author: Rad UI Team

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

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>−</NumberField.Decrement>
                <NumberField.Input />
                <NumberField.Increment>+</NumberField.Increment>
            </NumberField.Root>
        </div>
    )
}

export default NumberFieldExample

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	0
min	number	--
max	number	--
step	number	1
disabled	boolean	false
onValueChange	function	--