NumberInput

Numeric input with increment/decrement controls.

import { NumberInput } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<NumberInput label="Quantity" defaultValue={1} />

<NumberInput label="Percentage" defaultValue={50} min={0} max={100} step={10} />

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Uncontrolled initial value.
`onChange`	`(value: number) => void`	—	Callback when value changes.
`min`	`number`	`-Infinity`	Minimum allowed value.
`max`	`number`	`Infinity`	Maximum allowed value.
`step`	`number`	`1`	Step increment for buttons and keyboard.
`precision`	`number`	—	Decimal places (auto-detected from step if not provided).
`label`	`string`	—	Label text displayed above the input.
`disabled`	`boolean`	`false`	Disable interaction.
`size`	`'sm' \| 'md' \| 'lg'`	—	Input size preset.
`class`	`string`	—	Additional CSS classes.
`placeholder`	`string`	—	Placeholder text for the input.
`unstyled`	`boolean`	`false`	Remove all default styling classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.