Number Field

Overview

Use Number Field when users need to enter or adjust a numeric value.

Number Field is useful for quantities, limits, prices, percentages, durations, counts, and settings where incrementing or decrementing is helpful.

Anatomy

A number field has an input, value, increment and decrement controls, optional scrub area, range constraints, step size, and formatted display.

Behavior

Set sensible minimum, maximum, and step values. Use formatting when the number represents currency, percent, units, or other structured values.

Accessibility

Provide a label and make sure the increment and decrement controls have accessible names. Keep typed input available for keyboard users.

Installation

npx love-ui@latest add 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

The examples show sizes, disabled state, external labels, scrub input, ranges, formatting, step values, and form integration.

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

Small Size

Large Size

Disabled

With External Label

With Scrub

With Range

With Formatted Value

With Step

Form Integration