Number field

A number with minus and plus buttons on either side, centred tabular figures, and min, max and step limits.

ui.number-fieldcomponents/ui/number-field.tsx

Use case

For the AI

Use it for a count a person nudges up or down: the quantity on an order line, the seats on a plan, the days of a rental, the hours on a time entry. min and max stop the buttons at the limits, and format with a locale shows the value as money or a percentage while the value stays a number.

Use it when

A quantity on an order or an invoice line
A count with limits (seats, days, people)
A number stepped by a fixed amount (step={0.25} for hours)

Use something else when

Digits that are not a quantity (a phone, an invoice number, a postal code): Input
A value picked along a range by dragging: Slider
A free amount with a currency sign and no stepping: Input group

Examples

Code

Import

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

Usage

<Field>
  <FieldLabel>Quantity</FieldLabel>
  <NumberField defaultValue={1} min={1} max={99}>
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
</Field>

Rules

Compose it as NumberField holding a NumberFieldGroup with NumberFieldDecrement, NumberFieldInput and NumberFieldIncrement.
Name it: a FieldLabel in a Field, or aria-label on NumberField.
Set min (and max when there is one) so the buttons stop at the limit.
For money or a percentage pass format and locale (format={{ style: "currency", currency: "CAD" }}, locale="fr-CA"); onValueChange gets a number or null.
size (sm, default, lg) goes on NumberField.