# NumberField

> A numeric field pairing a native `<input type="number">` control with a decrement and an increment button, all three sharing one bordered, rounded frame.

```ts
import { NumberField } from "@sdxc/ui";
```

Renders a plain host stacking this field's compound parts in a single
column with a small gap between them: typically a caption, the
NumberField.Group row, and any supporting or validation copy.

## Examples

```tsx
<NumberField>
	<Label htmlFor="quantity">{t("form.quantity.label")}</Label>
	<NumberField.Group>
		<NumberField.DecrementButton aria-label={t("stepper.decrement")} />
		<NumberField.Input id="quantity" name="quantity" min={0} max={10} defaultValue={1} />
		<NumberField.IncrementButton aria-label={t("stepper.increment")} />
	</NumberField.Group>
</NumberField>
```

## Props

Also accepts everything in `TagProps<"div">`.


### NumberField.Group

Renders NumberField's frame: a `role="group"` `<div>` drawing a bordered, rounded, tinted-background box that reads as one seamless control, ringing the whole frame via `:focus-within` when a child gains focus.

Also accepts everything in `TagProps<"div">`.


### NumberField.Input

Renders NumberField's control: a native `<input type="number">` built on Input.

Also accepts everything in `Omit<Input.Props, "type" | "role" | "color">`.


### NumberField.DecrementButton

Renders a native `<button>` decrementing NumberField.Input's value; its glyph is `aria-hidden`, so callers must supply an `aria-label`.

Also accepts everything in `Omit<TagProps<"button">, "children">`.


### NumberField.IncrementButton

Renders a native `<button>` incrementing NumberField.Input's value; its glyph is `aria-hidden`, so callers must supply an `aria-label`.

Also accepts everything in `Omit<TagProps<"button">, "children">`.