Component reference
NumberInput
A number the user can type or step.
Preview
Type or step
Type a number or use the stepper. Values clamp to min, max and step on commit, and the committed figure uses the decimal places of the step.
render: () => {
const quantity = signal<number | undefined>(2);
return (
<Stack align="start">
<Field label="Copies" htmlFor="story-copies" description="1 to 12, in whole numbers.">
<NumberInput
id="story-copies"
min={1}
max={12}
step={1}
value={quantity}
onValueChange={(next) => {
quantity.value = next;
}}
/>
</Field>
<Field label="Line height" htmlFor="story-leading">
<NumberInput id="story-leading" defaultValue={1.5} min={1} max={2} step={0.1} />
</Field>
<Field label="Unavailable" htmlFor="story-locked">
<NumberInput id="story-locked" defaultValue={3} disabled />
</Field>
</Stack>
);
}Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { NumberInput } from "meowtail";
<NumberInput id="story-leading" defaultValue={1.5} min={1} max={2} step={0.1} />API reference
Clamping and formatting happen on commit.
Props
| Prop | Type | Default |
|---|---|---|
value | MaybeSignal<number | undefined> | – |
defaultValue | number | – |
min | number | – |
max | number | – |
step | number | 1 |
precisionDecimal places of a committed value. When omitted, derived from step. | number | – |
disabled | boolean | – |
readOnly | boolean | – |
required | boolean | – |
name | string | – |
id | string | – |
onValueChange | (value: number | undefined) => void | – |
onChange | (event: Event) => void | – |
onInput | (event: Event) => void | – |
onBlur | (event: FocusEvent) => void | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootdecrementcontrolincrement
Registry
The component is registered as number-input in the meowtail component registry.