Limit field

LimitField edits a limit. It's Base UI's NumberField with money defaults, so NumberField provides typing, clamping to min/max, arrow-key steps and the scrub area. It imports from its own entry point:

import { LimitField } from "@danolekh/cardstock/limit";

<LimitField.Root
  value={limit}
  onValueChange={setLimit}
  min={500}
  max={5000}
  step={50}
  currency="EUR"
  locale="de-AT"
>
  <LimitField.ScrubArea>
    <LimitField.Label>Monthly limit</LimitField.Label>
    <LimitField.ScrubAreaCursor>⇔</LimitField.ScrubAreaCursor>
  </LimitField.ScrubArea>
  <LimitField.Group>
    <LimitField.Decrement>−</LimitField.Decrement>
    <LimitField.Input />
    <LimitField.Increment>+</LimitField.Increment>
  </LimitField.Group>
</LimitField.Root>;

What it adds to NumberField:

• currency formats the value as whole units of that currency. Pass format to use your own Intl.NumberFormatOptions instead.
• largeStep (Shift+arrow) defaults to five steps.
• onValueChange only receives numbers. An emptied input doesn't report, and the last limit stays.
• LimitField.Label is a <label> wired to the input.
• Every part carries a data-slot (limit-field, limit-field-input, …) like the card's parts do.

Every other NumberField prop and state attribute passes through, such as data-scrubbing, disabled, readOnly and onValueCommitted.

Keyboard: ↑/↓ change the limit by step, Shift+↑/↓ by largeStep, and Home/End jump to min/max. Drag sideways across the scrub area to scrub.

A styled copy is in the registry:

pnpm dlx shadcn@latest add https://cardstock.danolekh.com/r/limit-field.json