Renders form input elements with label, description, and error handling.

The unified form field component for Sutra UI. This is a drop-in replacement for Phoenix's generated input component, providing full parity with Phoenix generators while using Sutra UI styling.

Basic Usage

# Simple text input
<.input type="text" name="username" placeholder="Username" />

# With label
<.input type="email" name="email" label="Email" placeholder="you@example.com" />

# With label and description
<.input
  type="text"
  name="username"
  label="Username"
  description="This will be your public display name."
  placeholder="johndoe"
/>

Phoenix Form Integration

Pass a Phoenix.HTML.FormField via the field attribute to automatically extract the input's id, name, value, and validation errors:

<.simple_form for={@form} phx-submit="save">
  <.input field={@form[:email]} type="email" label="Email" />
  <.input field={@form[:password]} type="password" label="Password" />
  <.input
    field={@form[:bio]}
    type="textarea"
    label="Bio"
    description="Tell us about yourself."
  />
  <:actions>
    <.button type="submit">Save</.button>
  </:actions>
</.simple_form>

Errors are displayed automatically when the field has been interacted with (via Phoenix.Component.used_input?/1), so errors won't flash on first render.

Error Handling

Errors can come from two sources:

1. Automatic - from a Phoenix.HTML.FormField (Ecto changeset errors):

    <.input field={@form[:email]} type="email" label="Email" />

2. Manual - via the errors attribute:

    <.input name="email" errors={["can't be blank"]} />

When errors are present, the input gets aria-invalid="true" and error messages render below the input with a destructive icon.

Input Types

This component handles all standard HTML input types, with special handling for:

• type="checkbox" - Delegates to SutraUI.Checkbox with hidden false value
• type="switch" - Delegates to SutraUI.Switch (toggle with role="switch")
• type="select" - Renders a native <select> element
• type="textarea" - Delegates to SutraUI.Textarea
• type="range" - Delegates to SutraUI.Slider with colocated hook
• type="hidden" - Renders just the input, no wrapper or label

Type Examples

# Select with options
<.input
  type="select"
  name="country"
  label="Country"
  prompt="Select a country"
  options={[{"United States", "us"}, {"Canada", "ca"}]}
/>

# Checkbox
<.input type="checkbox" name="terms" label="I agree to the terms" />

# Switch (toggle)
<.input type="switch" name="notifications" label="Enable notifications" />

# Textarea
<.input type="textarea" name="bio" label="Bio" rows={4} />

# Range slider
<.input type="range" name="volume" label="Volume" min={0} max={100} />

Select Types

This component provides two ways to render select inputs:

Native Select (via <.input type="select">)

For standard form selects that work with Phoenix generators:

<.input
  field={@form[:country]}
  type="select"
  label="Country"
  prompt="Select a country"
  options={[{"United States", "us"}, {"Canada", "ca"}]}
/>

Custom Select (via SutraUI.Select)

For advanced features like search/filter, keyboard navigation, and custom styling, use the dedicated SutraUI.Select component directly:

<.select id="country" name="country" value={@country} searchable>
  <.select_option value="us" label="United States" />
  <.select_option value="ca" label="Canada" />
</.select>

See SutraUI.Select for more details.

Complete Form Example

Here is a realistic registration form demonstrating labels, descriptions, error handling, and multiple input types working together:

defmodule MyAppWeb.RegistrationLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    changeset = Accounts.change_user(%User{})
    {:ok, assign(socket, form: to_form(changeset))}
  end

  def handle_event("validate", %{"user" => params}, socket) do
    changeset =
      %User{}
      |> Accounts.change_user(params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, form: to_form(changeset))}
  end

  def handle_event("save", %{"user" => params}, socket) do
    case Accounts.create_user(params) do
      {:ok, _user} -> {:noreply, push_navigate(socket, to: ~p"/dashboard")}
      {:error, changeset} -> {:noreply, assign(socket, form: to_form(changeset))}
    end
  end

  def render(assigns) do
    ~H"""
    <.simple_form for={@form} phx-change="validate" phx-submit="save">
      <.input
        field={@form[:name]}
        label="Full Name"
        placeholder="Jane Smith"
      />
      <.input
        field={@form[:email]}
        type="email"
        label="Email"
        description="We'll send a confirmation link to this address."
        placeholder="jane@example.com"
      />
      <.input
        field={@form[:password]}
        type="password"
        label="Password"
        description="Must be at least 8 characters."
        placeholder="Create a password"
      />
      <.input
        field={@form[:role]}
        type="select"
        label="Role"
        prompt="Choose a role"
        options={[{"Developer", "dev"}, {"Designer", "design"}, {"Manager", "pm"}]}
      />
      <.input
        field={@form[:bio]}
        type="textarea"
        label="Bio"
        description="Brief description for your profile."
        rows={3}
      />
      <.input
        field={@form[:terms]}
        type="checkbox"
        label="I agree to the terms of service"
      />
      <.input
        field={@form[:newsletter]}
        type="switch"
        label="Subscribe to newsletter"
        description="Receive weekly updates about new features."
      />
      <:actions>
        <.button type="submit">Create Account</.button>
      </:actions>
    </.simple_form>
    """
  end
end

Accessibility

• Labels are properly associated with inputs via wrapping <label> elements
• Description text is linked via aria-describedby on the input
• aria-invalid is automatically set when errors are present
• Error messages are displayed below inputs with destructive styling
• Switch inputs include role="switch" and aria-checked
• Range inputs include aria-valuemin, aria-valuemax, aria-valuenow
• Supports standard ARIA attributes via :rest