---
title: "Number Field"
description: "A number input with minus and plus steppers, such as a cart quantity or a seat count, that keeps the value in range and steps with the arrow keys. Built on Base UI."
plan: Free
docs: https://ui.edbn.me/docs/components/number-field
---

# Number Field

A number input with minus and plus steppers, such as a cart quantity or a seat count, that keeps the value in range and steps with the arrow keys. Built on Base UI.

## Installation

```bash
npx shadcn@4.19.0 add https://ui.edbn.me/r/number-field.json
```

## Dependencies
- npm: @base-ui/react@^1.8.0, lucide-react@^1.33.0
- edbn: edbn-base

## Usage

```tsx examples/number-field-basic.tsx
"use client";
import { useId } from "react";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-field";

export default function NumberFieldBasicPreview() {
  const seatsId = useId();
  return (
    <div className="flex w-full max-w-compact flex-col gap-6">
      <NumberField defaultValue={2} min={1} max={10}>
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput aria-label="Quantity" />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
      <Field>
        <FieldLabel htmlFor={seatsId}>Seats</FieldLabel>
        <NumberField id={seatsId} defaultValue={12} min={1} max={500}>
          <NumberFieldGroup>
            <NumberFieldDecrement />
            <NumberFieldInput />
            <NumberFieldIncrement />
          </NumberFieldGroup>
        </NumberField>
        <FieldDescription>$12 per seat each month.</FieldDescription>
      </Field>
    </div>
  );
}
```

## Files
- components/ui/number-field.tsx (130 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt