Number Field

Collects a numeric value with keyboard and stepper controls.

Quantity

Installation

Install Number Field from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/number-field

Usage

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
NumberField	The root component that owns the primary structure and state.
NumberFieldGroup	Groups related items into one logical set.
NumberFieldInput	Captures or exposes the current value.
NumberFieldDecrement	A composable part of the component anatomy.
NumberFieldIncrement	A composable part of the component anatomy.
NumberFieldScrubArea	A composable part of the component anatomy.
NumberFieldScrubAreaCursor	A composable part of the component anatomy.
NumberFieldContext	A composable part of the component anatomy.
NumberFieldPrimitive	A composable part of the component anatomy.

API Reference

Number Field exports 9 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

NumberField Component
NumberFieldGroup Component
NumberFieldInput Component
NumberFieldDecrement Component
NumberFieldIncrement Component
NumberFieldScrubArea Component
NumberFieldScrubAreaCursor Component
NumberFieldContext Component
NumberFieldPrimitive Component

Accessibility

Provide Number Field with a visible label or an equivalent programmatic accessible name.
Expose disabled, required, selected, and invalid states through the component API instead of color alone, and keep keyboard focus visible.

Source

Number Field is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Navigation Menu Pagination