Number Field

A number input with step buttons, keyboard stepping, and locale-aware formatting.

Seats

When to use

Use when: A number people adjust in steps, such as a quantity.
Avoid when: The value is an identifier that happens to be digits, such as a phone number; use Input.

Installation

bunx shelf add number-field

The source lands in src/components/ui/number-field.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as NumberField from "@/components/ui/number-field";

<NumberField.Root defaultValue={1} min={0}>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input aria-label="Quantity" />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.