Number Field

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/number-field

UsageCopy Anchor Link

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

<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>;

NumberFieldScrubArea renders the label. Drag it left or right to change the value. Without it, pass aria-label to NumberFieldInput, or point a Label at the NumberField's id.

Arrow keys step the value. Hold Shift for steps of 10, or Alt for steps of 0.1.

RangeCopy Anchor Link

min and max limit the value and disable the buttons at each end.

FormattingCopy Anchor Link

format takes Intl.NumberFormat options, for currencies, percentages, and units.

SizesCopy Anchor Link

API referenceCopy Anchor Link

Each part wraps the matching Base UI Number Field part and accepts all its props. The buttons are labeled "Increase" and "Decrease" for screen readers.

NumberFieldCopy Anchor Link

NumberFieldScrubAreaCopy Anchor Link