The LivePhone.Component is a Phoenix LiveView component that can be used to prompt users for their phone numbers, and try to make it as simple as possible.

Usage is pretty simple, and there is an example Phoenix project included in the ./example/ directory of this repository, so feel free to check that out as well.

  live_component(
    @socket,
    LivePhone.Component,
    id: "phone",
    form: :user,
    field: :phone,
    tabindex: 0,
    preferred: ["US", "CA"]
  )

This will result in a form field with the name user[phone]. You can specify just the name manually if desired, but when you add the form option the name will be generated via Phoenix.HTML.Form.input_name/2. So this should behave like a regular input field.

With preferred you can set a list of countries that you believe should be on top always. The currently selected country will also be on top automatically.