> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.

# Number Field

> A number input with increment/decrement buttons and scrub functionality, built on @base-ui/react.

The NumberField component provides a specialized input for numeric values with built-in increment/decrement controls and mouse scrubbing.

## Installation

```tsx theme={null}
import {
  NumberFieldRoot,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
} from "@craftdotui/baseui/components/number-field";
```

## Usage

```tsx theme={null}
<NumberFieldRoot>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>
```

## Components

### NumberFieldRoot

<ParamField path="value" type="number">
  Controlled value.
</ParamField>

<ParamField path="defaultValue" type="number">
  Default value.
</ParamField>

<ParamField path="onValueChange" type="function">
  Callback when value changes.
</ParamField>

<ParamField path="min" type="number">
  Minimum value.
</ParamField>

<ParamField path="max" type="number">
  Maximum value.
</ParamField>

<ParamField path="step" type="number" default="1">
  Step increment.
</ParamField>

<ParamField path="disabled" type="boolean">
  Disable the field.
</ParamField>

### NumberFieldInput

<ParamField path="size" type="string" default="md">
  Size variant. Options: `xs`, `sm`, `md`, `lg`, `xl`
</ParamField>

<ParamField path="variant" type="string" default="default">
  Visual variant.
</ParamField>

### NumberFieldIncrement

Button to increment the value.

### NumberFieldDecrement

Button to decrement the value.

### NumberFieldScrubArea

Interactive area for mouse scrubbing to change values.

### NumberFieldScrubAreaCursor

Cursor icon shown during scrubbing.

## Examples

### Basic Number Field

```tsx theme={null}
<NumberFieldRoot defaultValue={5}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>
```

### With Range and Step

```tsx theme={null}
<NumberFieldRoot min={0} max={100} step={5} defaultValue={50}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>
```

### With Scrub Area

```tsx theme={null}
<NumberFieldRoot>
  <NumberFieldScrubArea>
    <NumberFieldScrubAreaCursor />
    Value:
  </NumberFieldScrubArea>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>
```

### Controlled

```tsx theme={null}
const [value, setValue] = useState(10);

<NumberFieldRoot value={value} onValueChange={setValue}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>
```

## Accessibility

* Built on @base-ui/react for ARIA support
* Keyboard navigation (Arrow Up/Down, Page Up/Down)
* Screen reader announcements
* Increment/decrement buttons are keyboard accessible
* Proper min/max constraints