# `PhiaUi.Components.NumberInput`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/number_input.ex#L1)

Numeric stepper input component with optional prefix/suffix and form integration.

Renders a number input flanked by decrement (−) and increment (+) buttons.
The buttons use `type="button"` so they never trigger form submission — the
parent form controls submit behaviour. The input itself is a native
`<input type="number">` which preserves browser built-in keyboard behaviour
(arrow keys, scroll wheel) and numeric validation.

## Basic usage

    <.number_input name="quantity" value={@qty} />

## With constraints

    <.number_input name="quantity" value={@qty} min={0} max={100} step={1} />

## With prefix and suffix

    <.number_input name="price" value={@price} prefix="$" suffix="USD" />

## Form-integrated usage

    <.form_number_input field={@form[:price]} label="Price" prefix="$" />

## Disabled / read-only

    <.number_input name="qty" value={0} disabled={true} />
    <.number_input name="qty" value={42} readonly={true} />

# `form_number_input`

Renders a form-integrated number input with label and error messages.

Wraps `number_input/1` with a `<label>` (when `:label` is given) and error
`<p>` elements sourced from `field.errors`. Error messages are interpolated
using the same `translate_error/1` helper as the rest of the PhiaUI form
components.

## Examples

    <.form_number_input field={@form[:quantity]} label="Quantity" />

    <.form_number_input field={@form[:price]} label="Price" prefix="$" />

    <.form_number_input
      field={@form[:amount]}
      label="Amount"
      min={0}
      max={9999}
      step={0.01}
    />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct (typically `@form[:field_name]`).
  Provides `id`, `name`, `value`, and `errors` automatically.

* `label` (`:string`) - Label text rendered above the input. Omit to suppress the `<label>` element. Defaults to `nil`.
* `prefix` (`:string`) - Optional prefix text (e.g. `"$"`). Defaults to `nil`.
* `suffix` (`:string`) - Optional suffix text (e.g. `"USD"`). Defaults to `nil`.
* `class` (`:string`) - Additional classes merged into the underlying `<input>`. Defaults to `nil`.
* `min` (`:any`) - Minimum allowed value. Defaults to `nil`.
* `max` (`:any`) - Maximum allowed value. Defaults to `nil`.
* `step` (`:any`) - Step amount. Defaults to `1`. Defaults to `1`.
* `placeholder` (`:string`) - Placeholder text. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the input. Defaults to `false`.
* `readonly` (`:boolean`) - Makes the input read-only. Defaults to `false`.

# `number_input`

Renders a stepper-style number input with optional prefix/suffix decorators.

The layout is: **[−] [input] [+]** — decrement button, the numeric input,
and an increment button. Both buttons have `type="button"` and carry
accessible `aria-label` attributes (`"Decrease"` / `"Increase"`).

ARIA attributes `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` are
set on the input when the corresponding props are provided, making the range
semantics available to assistive technology.

## Examples

    <%!-- Basic --%>
    <.number_input name="qty" value={@qty} />

    <%!-- With constraints --%>
    <.number_input name="qty" value={@qty} min={0} max={99} step={1} />

    <%!-- With currency prefix --%>
    <.number_input name="price" value={@price} prefix="$" />

    <%!-- Disabled state --%>
    <.number_input name="qty" value={0} disabled={true} />

## Attributes

* `id` (`:string`) - HTML id attribute for the underlying `<input>` element. Defaults to `nil`.
* `name` (`:string`) - HTML name attribute forwarded to `<input>`. Required for form submission. Defaults to `nil`.
* `value` (`:any`) - Current numeric value. Passed as the `value` attribute of the `<input>`. Defaults to `nil`.
* `min` (`:any`) - Minimum allowed value. Maps to the native `min` attribute. Defaults to `nil`.
* `max` (`:any`) - Maximum allowed value. Maps to the native `max` attribute. Defaults to `nil`.
* `step` (`:any`) - Step increment/decrement amount. Defaults to `1`. Defaults to `1`.
* `placeholder` (`:string`) - Placeholder text shown when the input is empty. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the input and stepper buttons. Defaults to `false`.
* `readonly` (`:boolean`) - Makes the input read-only. Defaults to `false`.
* `prefix` (`:string`) - Optional text shown to the left inside the input (e.g. `"$"`). Defaults to `nil`.
* `suffix` (`:string`) - Optional text shown to the right inside the input (e.g. `"USD"`). Defaults to `nil`.
* `class` (`:string`) - Additional Tailwind classes merged into the `<input>` element via `cn/1`. Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*