---
title: Number Field
description: A field that allows user input of numeric values.
links:
  doc: https://base-ui.com/react/components/number-field
  anatomy: https://base-ui.com/react/components/number-field#anatomy
  api: https://base-ui.com/react/components/number-field#api-reference
---

```tsx
import { NumberField } from "@/components/ui/number-field";

export function NumberFieldDemo() {
  return (
    <div>
      <label htmlFor="number-field" className="mb-2 inline-block font-medium">
        Number Field
      </label>
      <NumberField id="number-field" placeholder="Enter a number" />
    </div>
  );
}
```

## Installation

<ComponentSource name="number-field" title="components/ui/number-field.tsx" />

## Usage

```tsx
import { NumberField } from "@/components/ui/number-field";
```

```tsx
<NumberField />
```

## Example

### Sizes

Pass the `size` prop to set the size of the NumberField. Available sizes are `xs`, `sm`, `default`, `lg`, and `xl`.

```tsx
import { NumberField } from "@/components/ui/number-field";

export function NumberFieldDemo() {
  return (
    <div className="flex flex-col gap-4">
      <NumberField placeholder="Enter a number" size="xs" />
      <NumberField placeholder="Enter a number" size="sm" />
      <NumberField placeholder="Enter a number" size="default" />
      <NumberField placeholder="Enter a number" size="lg" />
      <NumberField placeholder="Enter a number" size="xl" />
    </div>
  );
}
```

### Controlled

```tsx
"use client";

import { useState } from "react";

import { NumberField } from "@/components/ui/number-field";

export function NumberFieldDemo() {
  const [age, setAge] = useState<number | null>(null);

  return (
    <div>
      <label htmlFor="age" className="mb-2 inline-block font-medium">
        Enter your age
      </label>
      <NumberField id="age" min={0} max={200} value={age} onValueChange={setAge} />
      <p className="mt-2 text-muted-foreground text-sm">Your age is: {age ?? "null"}</p>
    </div>
  );
}
```

### Minimum and maximum value

Pass the `min` prop or `max` prop to set an upper and lower limit for the input. By default, the input will restrict the value to stay within the specified range.

```tsx
function NumberFieldDemo() {
  return <NumberField min={0} max={10} />;
}
```

## API Reference

### NumberField Props

<ApiReferenceAccordion
  type={{
    size: {
      description: "The size of the input component.",
      type: `'xs' | 'sm' | 'default' | 'lg' | 'xl'`,
      default: `'default'`,
    },
    placeholder: {
      description: "The placeholder text to display when the input is empty.",
      type: "string",
    },
  }}
/>