# Number Field

Number Field wraps Base UI's number field primitive with the Tailwind classes from the official Base UI example.

::example{src="components/number-field/number-field.tsx"}

## Anatomy

### Base UI Style

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

<NumberField.Root defaultValue={100}>
  <NumberField.ScrubArea>
    <label>Amount</label>
    <NumberField.ScrubAreaCursor />
  </NumberField.ScrubArea>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>
```

### Shadcn Style

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

## Composition

Use the following composition to build `NumberField`:

```txt
NumberField
├── NumberFieldInput
├── NumberFieldGroup
├── NumberFieldIncrement
├── NumberFieldDecrement
├── NumberFieldScrubArea
└── NumberFieldScrubAreaCursor
```


## API Reference

Official API: [Base UI Number Field API](https://base-ui.com/react/components/number-field#api-reference).

This wrapper preserves the underlying Base UI Number Field API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.

### Root

`NumberField` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |

### Group

`NumberField.Group` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |

### Increment

`NumberField.Increment` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |

### Decrement

`NumberField.Decrement` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |

### Input

`NumberField.Input` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |

### ScrubArea

`NumberField.ScrubArea` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |

### ScrubAreaCursor

`NumberField.ScrubAreaCursor` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |