PhiaUi.Components.PhoneInput (phia_ui v0.1.17)

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

Summary

Functions

form_phone_input(assigns)

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

phone_input(assigns)

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

Functions

form_phone_input(assigns)

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(assigns)

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"].