Sections

Utilities

Forms

Hooks

useIsMobileNew

Number Input

Numeric input for entering values.

Installation


pnpm dlx shadcn@latest add @shark/number-input

Anatomy


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

Usage


import { 
  NumberInput, 
  NumberInputGroup, 
  NumberInputInput, 
  NumberInputIncrement, 
  NumberInputDecrement 
} from "@/comopnents/ui/number-input";


<NumberInput>
  <NumberInputGroup>
    <NumberInputInput />
    <NumberInputIncrement />
    <NumberInputDecrement />
  </NumberInputGroup>
</NumberInput>

Controlled

Use value and onValueChange to control the number input. Keep the value as a string when using formatOptions to preserve locale formatting.

Select the number 3

❌

States

Disabled

Use the disabled prop to disable the number input.

Invalid

Use the invalid prop to mark the number input as invalid.

Sizes

Use the size prop to change the input height.

Small

Medium

Large

Examples

Field Only

With Field

Use Field, FieldLabel, and FieldDescription for a labeled number input with helper text.

With Input Group

Use InputGroup, InputGroupAddon, and InputGroupText to add prefix or suffix.

€

EUR

With Scrub

Use the NumberInputScrubber to drag the label to change the value.

Quantity

With Range

Pass min and max to restrict the value to the specified range.

Use clampValueOnBlur={false} to allow typing outside range until blur.

With Formatted Value

Use formatOptions with Intl.NumberFormatOptions to format the displayed value.

With Step

Use the step prop to set the increment/decrement amount.

Step 5

Step 0.1

Mouse Wheel

Use the allowMouseWheel prop to increment or decrement the value with the mouse wheel.

API Reference

NumberInput

Root component. Manages numeric value and stepper controls.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`scrubber`	`boolean`	`false`
`defaultValue`	`string`	-
`value`	`string`	-
`min`	`number`	`Number.MIN_SAFE_INTEGER`
`max`	`number`	`Number.MAX_SAFE_INTEGER`
`step`	`number`	`1`
`formatOptions`	`Intl.NumberFormatOptions`	-
`disabled`	`boolean`	-
`invalid`	`boolean`	-
`focusInputOnChange`	`boolean`	`true`
`clampValueOnBlur`	`boolean`	`true`
`allowMouseWheel`	`boolean`	`false`
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`className`	`string`	-
`asChild`	`boolean`	`false`

NumberInputGroup

Wraps the input and increment/decrement buttons.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

NumberInputDecrement

Decreases the value by the step amount.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

NumberInputIncrement

Increases the value by the step amount.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

NumberInputInput

Numeric input. Accepts number or direct typing.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`className`	`string`	-
`asChild`	`boolean`	`false`

NumberInputScrubber

Drag area for scrubbing the value.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

Native Select

Pagination