NumberInput

Numeric input with increment/decrement buttons.

formnumberinput

Import

import { NumberInput } from "@/components/ui";

Basic Usage

NumberInput Preview

Code

tsx

<NumberInput placeholder="Enter quantity" />

With Min/Max

Set value boundaries

1<NumberInput min={0} max={100} defaultValue={50} />

With Step

Custom increment value

1<NumberInput step={5} min={0} max={100} />

With Precision

Control decimal places

1<NumberInput precision={2} step={0.01} defaultValue={9.99} />

With Label

Using FieldWrapper for form layout

1<FieldWrapper label="Price" required>
2  <NumberInput
3    min={0}
4    precision={2}
5    step={0.01}
6    placeholder="0.00"
7  />
8</FieldWrapper>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring