Number Input

Installation

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

Usage

import { NumberField } from "@/components/ui/number-input";

<NumberField />

Sizes

Use the size prop to change the input height.

Small

Medium

Large

Examples

Disabled

Use the disabled prop to disable the number input.

Invalid

Use the invalid prop (or aria-invalid) to mark the number input as invalid and show error styling.

With Scrub

Render <NumberField /> with the scrubber prop and a label 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.

Controlled

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

API Reference

NumberField

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