Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Number Input for React Radix UI

Numeric input for entering values.

Framework
UI library

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/number-input.json

Anatomy

NumberInput
├── NumberInputInput
├── NumberInputGroup
├── NumberInputValueText
├── NumberInputIncrement
├── NumberInputDecrement
└── NumberInputScrubber
    └── NumberInputLabel

Usage

import {
  NumberInput,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputInput,
} from "@/components/ui/number-input";
<NumberInput className="w-full max-w-48" defaultValue="1">
  <NumberInputGroup>
    <NumberInputDecrement />
    <NumberInputInput />
    <NumberInputIncrement />
  </NumberInputGroup>
</NumberInput>

Accessibility

KeyDescription
ArrowUp
Move up.
ArrowDown
Move down.
Home
Go to the start.
End
Go to the end.
Enter
Activate the focused item.
Space
Activate the focused control.

Demos

Controlled

Disabled

Field Only

Formatted

Invalid

Mouse Wheel

Range

Scrub

Size Lg

Size Md

Size Sm

Step

With Field

With Input Group

API Reference

NumberInput

PropType
disabled?boolean
formatOptions?Intl.NumberFormatOptions
max?number
min?number
readOnly?boolean

NumberInputGroup

PropType
AttributeType
data-disabled?string

NumberInputDecrement

PropType
AttributeType
CSS variableType
--radius-lgstring

NumberInputIncrement

PropType
AttributeType
CSS variableType
--radius-lgstring

NumberInputInput

PropType
AttributeType

NumberInputScrubber

PropType
AttributeType