Number Field

<NumberFieldlabel="Rate limit"defaultValue={100}min={1}max={1000}step={10}suffix="req/s"/>

Use NumberField wherever an <input type="number"> would go and you care about the result. It formats with Intl.NumberFormat, clamps to min and max, steps with ↑ and ↓ (×10 with Shift, ÷10 with Alt), and never lets a stray scroll silently change the value unless you ask for allowWheelScrub.

Usage

import { NumberField } from "@heyo-sh/heyo-ui";<NumberField label="Memory" defaultValue={128} min={64} max={1024} step={64} />;

Units

suffix is a flush addon on the right edge — the unit belongs to the control, not to the label, so it stays visible while the value changes.

<NumberField label="Memory" defaultValue={128} step={64} suffix="MB" /><NumberField label="Timeout" defaultValue={30} suffix="s" size="sm" />

Scrubbing

scrubbable adds a grip on the left edge that you drag sideways to sweep the value. It is the only comfortable way to dial a number in while watching something else update, and it costs one 20px handle.

<NumberField label="Opacity" scrubbable defaultValue={80} min={0} max={100} suffix="%" />

Formatting

format takes Intl.NumberFormatOptions, so currency, percentages and grouping are configuration rather than code.

<NumberFieldlabel="Budget"defaultValue={2500}step={100}format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }}/>

Properties