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

Phone number input with a country dial-code prefix selector.

Provides `phone_input/1` — a text input for phone numbers with a `<select>`
prefix showing the country flag emoji and dial code (+1, +44, etc.). Also
provides `form_phone_input/1` for changeset-integrated usage.

The component ships with ~40 of the most common country codes. The selected
dial code is stored in a separate named field so it is submitted alongside
the phone number.

## When to use

Use for any phone number field in a registration, checkout, profile, or
notification settings form where international users are expected.

## Basic usage

    <.phone_input
      name="phone"
      value={@phone}
      selected_code="+1"
      phx-change="update_phone"
    />

## Form-integrated

    <.form_phone_input
      field={@form[:phone_number]}
      label="Phone number"
      selected_code={@dial_code}
    />

## Capturing both fields

On submit, both the dial code (`:code_name` field) and the number (`:name`
field) are included in the params:

    def handle_event("save", %{"phone_code" => code, "phone" => number}, socket) do
      full = code <> number   # e.g. "+15551234567"
      ...
    end

# `form_phone_input`

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

## Examples

    <.form_phone_input field={@form[:phone]} label="Phone number" />

    <.form_phone_input field={@form[:phone]} label="Phone" selected_code="+44" />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct from `@form[:field_name]`.
* `label` (`:string`) - Label text rendered above the input. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `selected_code` (`:string`) - Currently selected dial code. Defaults to `"+1"`.
* `placeholder` (`:string`) - Placeholder for the number field. Defaults to `"000 000 0000"`.
* `class` (`:string`) - Additional CSS classes for the wrapper. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to `phone_input/1`. Supports all globals plus: `["phx-change", "phx-debounce", "disabled", "required"]`.

# `phone_input`

Renders a phone number input with a country dial-code prefix selector.

## Examples

    <.phone_input name="phone" value={@phone} />

    <.phone_input name="phone" value={@phone} selected_code="+44" placeholder="7700 900000" />

## Attributes

* `id` (`:string`) - HTML id for the phone number `<input>`. Auto-generated if nil. Defaults to `nil`.
* `name` (`:string`) - HTML name for the phone number field. Defaults to `nil`.
* `code_name` (`:string`) - HTML name for the dial-code `<select>`. Defaults to `name <> "_code"`. Defaults to `nil`.
* `value` (`:string`) - Current phone number value (without the dial code). Defaults to `nil`.
* `selected_code` (`:string`) - Currently selected dial code, e.g. `"+1"`, `"+44"`. Defaults to `"+1"`.
* `placeholder` (`:string`) - Placeholder text for the number field. Defaults to `"000 000 0000"`.
* `disabled` (`:boolean`) - Disables both the selector and the number input. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes for the outer wrapper. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the phone number `<input>`. Supports all globals plus: `["phx-change", "phx-debounce", "phx-keydown", "required", "autocomplete"]`.

---

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