Number input

Numeric field with stepper controls

Type a number directly or use the steppers on either side. Values stay inside the min and max bounds: the steppers disable at the limits, and a typed out-of-range value clamps into range on blur.

Default

Quantity

Empty

Helper text

Whole numbers only

Required

Bounds and step

Guests

Between 1 and 8

At the maximum

Increase is disabled

Opacity

Steps of 0.1

Compact

Quantity

With bounds

States

Error

Enter a quantity of at least 1

Disabled

// From the npm package
import { NumberInput } from 'rift-ds/components/NumberInput/NumberInput';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/number-input.json