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
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 use Base UI primitives from @base-ui/react 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.