Number Field

A numeric input with increment, decrement, and scrub controls.

API Reference

Preview

Installation

Usage

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"
<NumberField defaultValue={0}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

API Reference

NumberField

Root component. Alias for NumberField.Root from Base UI. See Base UI docs.

NumberFieldGroup

Container for the input and buttons. Alias for NumberField.Group from Base UI.

NumberFieldInput

Input element for the number value. Alias for NumberField.Input from Base UI.

NumberFieldIncrement

Button to increment the value. Alias for NumberField.Increment from Base UI.

NumberFieldDecrement

Button to decrement the value. Alias for NumberField.Decrement from Base UI.

NumberFieldScrubArea

Draggable area for adjusting the value. Alias for NumberField.ScrubArea from Base UI with a built-in cursor icon.

Examples

For accessible labelling and validation, prefer using the Field component to wrap number fields. See the related example: Number Field.

With Scrub

Disabled

With Range