PhiaUi.Components.UrlInput (phia_ui v0.1.17)

URL input with a lockable protocol prefix selector.

Provides url_input/1 — a text input that prepends an https:// / http:// selector as a visual prefix. The selected protocol is stored in a separate hidden input so it can be captured independently on form submit.

Also provides form_url_input/1 for full changeset integration with label, description, and error messages.

When to use

Use for any field that expects a full URL — website links, webhook endpoints, redirect URLs, CDN origins, or API base URLs. The prefix selector prevents users from accidentally omitting the protocol.

Basic usage

<.url_input
  name="website"
  value={@website}
  placeholder="example.com"
  phx-change="update_website"
/>

<%!-- With protocol selector name --%>
<.url_input
  name="endpoint"
  protocol_name="endpoint_protocol"
  protocol={@protocol}
  value={@endpoint}
  placeholder="api.example.com/v1"
/>

Form-integrated

<.form_url_input
  field={@form[:webhook_url]}
  label="Webhook URL"
  description="We'll POST events to this endpoint."
/>

Summary

Functions

form_url_input(assigns)

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

url_input(assigns)

Renders a URL input with an https:// / http:// protocol selector prefix.

Functions

form_url_input(assigns)

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

Examples

<.form_url_input field={@form[:website]} label="Website" />

<.form_url_input field={@form[:api_url]} label="API URL" protocol="http" />

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct from @form[:field_name].
label (:string) - Label text rendered above the input group. Defaults to nil.
description (:string) - Helper text rendered below the label. Defaults to nil.
protocol (:string) - Currently selected protocol. Defaults to "https". Must be one of "https", or "http".
placeholder (:string) - Placeholder for the URL path. Defaults to "example.com".
class (:string) - Additional CSS classes applied to the wrapper. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to url_input/1. Supports all globals plus: ["phx-change", "phx-debounce", "disabled", "required"].

url_input(assigns)

Renders a URL input with an https:// / http:// protocol selector prefix.

The protocol selector is a native <select> styled to match the input. A second hidden-ish URL <input> receives the actual path (without protocol). Both values are submitted together on form submit.

Examples

<.url_input name="site" value={@site} phx-change="update_site" />

<.url_input name="api" protocol="http" value={@api_url} placeholder="localhost:4000/api" />

Attributes

id (:string) - HTML id for the URL <input>. Auto-generated if nil. Defaults to nil.
name (:string) - HTML name for the URL path field. Defaults to nil.
protocol_name (:string) - HTML name for the protocol <select>. Defaults to name <> "_protocol". Defaults to nil.
value (:string) - Current URL value (path portion, without the protocol prefix). Defaults to nil.
protocol (:string) - Currently selected protocol. Defaults to "https". Must be one of "https", or "http".
placeholder (:string) - Placeholder for the URL path portion. Defaults to "example.com".
disabled (:boolean) - Disables both the protocol selector and the URL input. Defaults to false.
class (:string) - Additional CSS classes applied to the wrapper. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the URL <input> element. Supports all globals plus: ["phx-change", "phx-debounce", "phx-keydown", "required", "autocomplete"].