Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

API Reference
Loading...
Loading code...

Installation

pnpm dlx shadcn@latest add @uitopia/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

For accessible labelling and validation, prefer using the Field component to wrap number fields. See the related example: Number field.

Small Size

Loading...
Loading code...

Large Size

Loading...
Loading code...

Disabled

Loading...
Loading code...

With External Label

Loading...
Loading code...

With Scrub

Loading...
Loading code...

With Range

Loading...
Loading code...

With Formatted Value

Loading...
Loading code...

With Step

Loading...
Loading code...

Form Integration

Loading...
Loading code...