# NumberInput

A native numeric field with integrated decrement and increment actions.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Field, NumberInput } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Field label="Seats">
        {(control) => <NumberInput {...control} name="seats" defaultValue={5} min={0} max={20} />}
      </Field>
    </FloodRoot>
  );
}
```

## Design notes

- Values are finite numbers or null for an empty field. onValueChange reports edits and button/arrow steps; native min/max/step validity remains available. Out-of-bound typed values clamp on blur; a step mismatch remains native validation.
- Ref and native form attributes target the input. Controlled value stays host-owned; uncontrolled form reset restores the initial value. Buttons use explicit accessible names, which can be translated.
- Use Field for labels and feedback. Read-only remains selectable and prevents stepping. No currency/locale formatting or wheel interception is supplied. Available in 0.2.5.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `invalid` | `boolean` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
| `value` | `number \| null` | `—` |
| `defaultValue` | `number \| null` | `0` |
| `onValueChange` | `(value: number \| null) => void` | `—` |
| `min` | `number` | `—` |
| `max` | `number` | `—` |
| `step` | `number` | `1` |
| `decreaseLabel` | `string` | `"Decrease value"` |
| `increaseLabel` | `string` | `"Increase value"` |
| `Native HTML props` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "onChange" \| "min" \| "max" \| "step" \| "children">` | `Forwarded` |