Number Input

Navigation MenuPagination

A numeric field with − / + buttons and keyboard stepping.

Between 1 and 50.

Installation

pnpm add krz-ui

Usage

import { NumberInput } from "krz-ui";
<NumberInput label="Seats" min={1} max={50} value={seats} onValueChange={setSeats} />

API Reference

PropTypeDescription
value / defaultValuenumber | nullControlled or initial value. null is empty.
onValueChange(value: number | null) => voidCalled with the clamped value.
min / max / stepnumberLimits and step size. Shift + arrow steps by 10×.
precisionnumberDecimal places. Defaults to the decimals in step.
label / hint / error / placeholderReactNode / stringField text.
hideControlsbooleanHide the − / + buttons.
className / style / ref—className and style go on the whole field; ref and native input attributes go to the <input>. See Customization.
classNames{ label?, control?, input?, message?, button? }Extra classes for inner parts.