Sections

Components

Utilities

Forms

Hooks

useIsMobile

Number Input

Copy Markdown

Numeric input for entering values.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

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.

PreviewCode

Select the number 3

❌

States#

Disabled#

Use the disabled prop to disable the number input.

PreviewCode

Invalid#

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

PreviewCode

Sizes#

Use the size prop to change the input height.

Small#

PreviewCode

Medium#

PreviewCode

Large#

PreviewCode

Examples#

Field Only#

PreviewCode

With Field#

Use Field components for a labeled number input with helper text.

PreviewCode

Quantity

0 - 100 only

With Input Group#

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

PreviewCode

€

EUR

With Scrub#

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

PreviewCode

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.

PreviewCode

With Formatted Value#

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

PreviewCode

With Step#

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

PreviewCode

Step 5

Step 0.1

Mouse Wheel#

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

PreviewCode

API Reference#

NumberInput#

Root component. Manages numeric value and stepper controls.

Prop	Type	Default
`size`	`"sm"	"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"
`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 ](/docs/components/native-select)[

Pagination ](/docs/components/pagination)

On This Page

Installation Anatomy Usage Controlled States Disabled Invalid Sizes Small Medium Large Examples Field Only With Field With Input Group With Scrub With Range With Formatted Value With Step Mouse Wheel API Reference NumberInput NumberInputGroup NumberInputDecrement NumberInputIncrement NumberInputInput NumberInputScrubber