NumberInput
A number field built on `type="text"`. A native number input empties itself the moment a stray letter lands in it, changes value when the scroll wheel passes over, and hands back an empty string for anything it considers invalid — so the component never sees what the person actually typed. This one parses the text itself.
import { NumberInput } from '@joshicodes/cock';Quantities
Type a letter into one of these, or scroll over it. Nothing jumps.
One per four hens.
Empty is null, not zero.
{"boxes":6,"temperature":18.5,"feed":null}
Keyboard
- ↑ / ↓
- One step
- Page Up / Page Down
- Ten steps
- Home / End
- Jumps to min or max, when they are set
Behaviour
- `value` is `number | null`. An empty field is `null`, which is not the same as `0`, and a form that treats them alike is a bug waiting for a quantity of zero.
- Clamping to `min` and `max` happens on blur, not on every keystroke, or typing `100` into a field capped at 50 would stop at `5`.
- `step` decides the decimal places, so a step of `0.25` keeps two and never shows `0.30000000000000004`.
- The step buttons are out of the tab order: the field is already a spinbutton, and the arrow keys do the same job.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of NumberInput
| Prop | Type | Default |
|---|---|---|
value bindable`null` while the field is empty, so a blank is not confused with zero. | number | null | null |
min | number | — |
max | number | — |
step | number | 1 |
size | 'sm' | 'md' | 'lg' | 'md' |
invalid | boolean | false |
unit Suffix shown inside the field, e.g. a unit. | string | — |
class | string | — |
Anything else is forwarded to the underlying element, typed as HTMLInputAttributes.