Number Field

Installation

npx baseui-cn add number-field

Usage

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"

<NumberField defaultValue={25} min={0} max={100}>
  <NumberFieldScrubArea label="Amount" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Examples

Basic

A number field without a label or constraints.

Sizes

Available in sm, default, and lg sizes.

Min and max

Use min and max to constrain the value range.

Step

Use step to control the increment amount. Fractional steps are supported.

Currency format

Use the format prop with { style: "currency", currency: "USD" } for formatted display.

Spinner buttons

A compact variant with stacked chevron up/down buttons on the right side.

Disabled

API

NumberField

NumberFieldGroup, NumberFieldDecrement, NumberFieldIncrement, and NumberFieldInput all inherit size from the parent NumberField context. Pass size directly to any of them to override locally.

NumberFieldScrubArea