Fabric UI

Number Field

Fabric UI Number Field component for React and Tailwind CSS. A numeric input element with increment and decrement buttons, and a scrub area.

Radix UIBase UI
Radix UI
API Reference 
import {
  NumberField,
  NumberFieldDecrement,

Installation

pnpm dlx shadcn@latest add @fabric-ui/number-field

Usage

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Examples

Size

import {
  NumberField,
  NumberFieldDecrement,

With Action Buttons

import {
  NumberField,
  NumberFieldDecrement,

With Extended Message

import {
  NumberField,
  NumberFieldDecrement,

More Number Field components

Browse 6 production-ready Number Field components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.

Browse all 6 Number Field components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.