NumberField

Width

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/numberfield.json

npx shadcn@latest add https://prototyper-ui.com/r/numberfield.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/numberfield.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/numberfield.json

This will add the following files to your project:

components/ui/numberfield.tsx

Note: This component depends on Field. It will be installed automatically.

Usage

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldSteppers,
} from "@/components/ui/numberfield"

<NumberField>
  <NumberFieldGroup>
    <NumberFieldInput />
    <NumberFieldSteppers />
  </NumberFieldGroup>
</NumberField>

Anatomy

<NumberField>
  <FieldLabel />
  <NumberFieldGroup>
    <NumberFieldInput />
    <NumberFieldSteppers />
  </NumberFieldGroup>
  <FieldDescription />
  <FieldError />
</NumberField>

Or with individual step buttons:

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

Sub-component	`data-slot`	Purpose	Required
`NumberField`	`number-field`	Root provider, manages value state	Yes
`NumberFieldGroup`	`number-field-group`	Visual container for input and steppers	Yes
`NumberFieldInput`	`number-field-input`	The numeric input element	Yes
`NumberFieldIncrement`	`number-field-increment`	Button to increase the value	No
`NumberFieldDecrement`	`number-field-decrement`	Button to decrease the value	No
`NumberFieldSteppers`	`number-field-steppers`	Convenience wrapper with increment/decrement	No
`NumberFieldScrubArea`	`number-field-scrub-area`	Drag-to-scrub area for value adjustment	No
`NumberFieldScrubAreaCursor`	`number-field-scrub-area-cursor`	Custom cursor for the scrub area	No

Examples

Currency

Transaction amount

Description

Width

Enter a width in centimeters.

Disabled

Formatting

Adjust exposure

Percentages

Sales tax

Read Only

Read only

Reusable

Please enter a number

Step Values

Step

Step + minValue

Step + minValue + maxValue

Units

Package width

Validation

Enter your age

Validation Error

Styling

Data Slots

Use data-slot attributes to target specific parts of the number field:

Slot name	Element
`number-field`	Root wrapper
`number-field-group`	Visual container for input and controls
`number-field-input`	The `<input>` element
`number-field-increment`	Increment button
`number-field-decrement`	Decrement button
`number-field-steppers`	Steppers container (increment + decrement)
`number-field-scrub-area`	Drag-to-scrub interaction area
`number-field-scrub-area-cursor`	Custom cursor for scrub area

Customization Examples

/* Make the number field group larger */
[data-slot="number-field-group"] {
  @apply h-12;
}

/* Style the stepper buttons */
[data-slot="number-field-increment"],
[data-slot="number-field-decrement"] {
  @apply px-2 text-primary;
}

{/* Override size via className on the group */}
<NumberFieldGroup size="lg" className="rounded-lg">
  <NumberFieldInput />
  <NumberFieldSteppers />
</NumberFieldGroup>

API Reference

Root component that manages the number field state. Built on Base UI NumberField.Root.

Prop

Type

All Base UI NumberField props are forwarded via ...props.

NumberFieldGroup

Visual container that wraps the input and stepper controls.

Prop

Type

All Base UI NumberField.Group props are forwarded via ...props.

NumberFieldInput

The numeric input element.

Prop

Type

All Base UI NumberField.Input props are forwarded via ...props.

NumberFieldIncrement

Button that increments the value. Renders a chevron-up icon by default.

Prop

Type

All Base UI NumberField.Increment props are forwarded via ...props.

NumberFieldDecrement

Button that decrements the value. Renders a chevron-down icon by default.

Prop

Type

All Base UI NumberField.Decrement props are forwarded via ...props.

NumberFieldSteppers

Convenience wrapper that renders increment and decrement buttons in a vertical stack.

Prop

Type

All standard div props are forwarded via ...props.

NumberFieldScrubArea

A drag-to-scrub interaction area for adjusting the value by dragging.

Prop

Type

All Base UI NumberField.ScrubArea props are forwarded via ...props.

NumberFieldScrubAreaCursor

Custom cursor element rendered within the scrub area.

Prop

Type

All Base UI NumberField.ScrubAreaCursor props are forwarded via ...props.

numberFieldGroupVariants

A cva helper exported for applying number field group styles outside the component.

import { numberFieldGroupVariants } from "@/components/ui/numberfield"

<div className={numberFieldGroupVariants({ size: "lg" })}>...</div>

Accessibility

Keyboard Interactions

Key	Action
`ArrowUp`	Increments the value by one step
`ArrowDown`	Decrements the value by one step
`Home`	Sets the value to the minimum (if `min` is set)
`End`	Sets the value to the maximum (if `max` is set)
`Tab`	Moves focus into or out of the number field

ARIA Attributes

The input renders with role="spinbutton" via Base UI.
aria-valuenow, aria-valuemin, and aria-valuemax are set automatically based on the current value and constraints.
aria-invalid is set when validation fails.
data-disabled is set on the group and controls when the field is disabled.
Increment and decrement buttons are labeled for screen readers.

Related Components

Fielddependency

Form field wrapper with label, description, and error message.

NumberField

Related Components

On this page