NumberInput

PreviousNext

Numeric stepper input.

import { NumberInput } from "@/rl-ui";

<NumberInput value={count} onChange={setCount} min={0} max={10} />

Examples

Min / max / step

import { NumberInput } from "@/rl-ui";

<>
<NumberInput value={2} onChange={setN} min={0} max={5} step={1} />
<NumberInput value={1.5} onChange={setN} step={0.5} precision={1} />
</>

Sizes

import { NumberInput } from "@/rl-ui";

<>
<NumberInput size="small" value={1} onChange={setN} />
<NumberInput size="medium" value={1} onChange={setN} />
<NumberInput size="large" value={1} onChange={setN} />
</>

API

PropTypeDefaultDescription
valuenumber—Controlled value (required).
onChange(value: number) => void—Value change handler (required).
minnumber—Minimum value.
maxnumber—Maximum value.
stepnumber1Increment amount.
precisionnumber—Decimal places.
size"small" | "medium" | "large""medium"Inherited from Input.
disabledbooleanfalsePrevents interaction.