Number Input

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/number-input.json

Usage

import { 
  NumberField, 
  NumberFieldGroup, 
  NumberFieldInput, 
  NumberFieldIncrement, 
  NumberFieldDecrement 
} from "@/comopnents/ui/number-input";

<NumberField>
  <NumberFieldGroup>
    <NumberFieldInput />
    <NumberFieldIncrement />
    <NumberFieldDecrement />
  </NumberFieldGroup>
</NumberField>

Controlled

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

Sizes

Use the size prop to change the input height.

Small

Medium

Large

State

Disabled

Use the disabled prop to disable the number input.

Invalid

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

Examples

Field Only

Render the input field without stepper buttons.

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 content like currency symbols or units.

With Scrub

Use the <NumberFieldScrubber /> to enable the scrubber interaction—drag the label to change the value.

With Range

Pass min and max to clamp the value. The input restricts 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.

Mouse Wheel

Use the allowMouseWheel prop to increment or decrement the value with the mouse wheel when the input is focused.

API Reference

NumberField

Root component. Manages numeric value and stepper controls.

NumberFieldGroup

Wraps the input and increment/decrement buttons.

NumberFieldDecrement

Decreases the value by the step amount.

NumberFieldIncrement

Increases the value by the step amount.

NumberFieldInput

Numeric input. Accepts number or direct typing.

NumberFieldScrubber

Drag area for scrubbing the value (like slider). Wraps the input for label association.

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