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.

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.