# Number Field (/docs/components/number-field)



<ComponentPreview name="number-field-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#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 [#anatomy]

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

## Behavior [#behavior]

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

## Accessibility [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add number-field
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="number-field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" title="components/ui/number-field.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>
```

## Examples [#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](/ui/docs/components/field#number-field).

### Small Size [#small-size]

<ComponentPreview name="number-field-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="number-field-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="number-field-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With External Label [#with-external-label]

<ComponentPreview name="number-field-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Scrub [#with-scrub]

<ComponentPreview name="number-field-with-scrub" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Range [#with-range]

<ComponentPreview name="number-field-with-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Formatted Value [#with-formatted-value]

<ComponentPreview name="number-field-with-formatted-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Step [#with-step]

<ComponentPreview name="number-field-with-step" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="number-field-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />