Copy to clipboard
<NumberInput name="quantity" defaultValue={1} min={1} max={10} />
<NumberInput name="quantity" defaultValue={1} min={1} max={10} /><NumberInput name="quantity" defaultValue={1} min={1} max={10} />
Installation
Copy to clipboard
npx bearnie add number-input
npx bearnie add number-inputnpx bearnie add number-input
bunx bearnie add number-input
bunx bearnie add number-inputbunx bearnie add number-input
pnpm dlx bearnie add number-input
pnpm dlx bearnie add number-inputpnpm dlx bearnie add number-input
yarn dlx bearnie add number-input
yarn dlx bearnie add number-inputyarn dlx bearnie add number-input
Usage
import { NumberInput } from "@/components/bearnie/number-input"<NumberInput name="quantity" defaultValue={1} min={0} max={99} />A native input[type=number] with the browser spinners hidden and proper buttons instead, so typing, arrow keys, and form submission all work as usual. The buttons respect min, max, and step, and disable themselves at the bounds.
Examples
Step
step controls the increment — arrow keys and buttons both use it.
Copy to clipboard
<NumberInput name="price" defaultValue={2.5} min={0} step={0.5} />
<NumberInput name="price" defaultValue={2.5} min={0} step={0.5} /><NumberInput name="price" defaultValue={2.5} min={0} step={0.5} />
With a label
Copy to clipboard
<div class="grid gap-2">
<Label for="guests">Guests</Label>
<NumberInput id="guests" name="guests" defaultValue={2} min={1} max={8} />
</div>
<div class="grid gap-2">
<Label for="guests">Guests</Label>
<NumberInput id="guests" name="guests" defaultValue={2} min={1} max={8} />
</div><div class="grid gap-2">
<Label for="guests">Guests</Label>
<NumberInput id="guests" name="guests" defaultValue={2} min={1} max={8} />
</div>
Disabled
Copy to clipboard
<NumberInput defaultValue={3} disabled />
<NumberInput defaultValue={3} disabled /><NumberInput defaultValue={3} disabled />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Form field name |
| id | string | - | Id for pairing with a Label |
| defaultValue | number | - | Initial value |
| min / max | number | - | Bounds — the matching button disables at the edge |
| step | number | 1 | Increment used by the buttons and arrow keys |
| disabled | boolean | false | Disable the control |
| class | string | - | Additional CSS classes |
Events
Dispatches a bubbling number-change CustomEvent on every change: detail is { value } (a number, or null while the field is empty).