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

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

# `form_url_input`

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`

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

---

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