Input

The unified form field component. Renders inputs with optional label, description, and error handling. Integrates with Phoenix forms.

Default

With Label

Add a label using the label attribute. The label renders directly above the input.

With Label

With Description

Add helper text using the description attribute. It renders between the label and the input, and is linked via aria-describedby for accessibility.

With Description

Username

This will be your public display name.

With Errors

Pass error messages via the errors attribute. The input automatically gets aria-invalid="true" and errors display below.

With Errors

Password

Password must be at least 8 characters.

Input Types

The input component supports all standard HTML input types.

Types

Password

Amount

Date

    <.input type="email" label="Email" placeholder="name@example.com" />
<.input type="password" label="Password" placeholder="Enter password" />
<.input type="number" label="Amount" placeholder="0" />
<.input type="date" label="Date" />
  

Checkbox

Use type="checkbox" for boolean inputs. The label renders inline next to the checkbox.

Checkbox

Accept terms and conditions

Switch

Use type="switch" for toggle inputs. Renders with role="switch" for accessibility.

Switch

Enable notifications

Receive email notifications for updates.

Select

Use type="select" for native select dropdowns.

Select

Country

Choose your country of residence.

    <.input
  type="select"
  name="country"
  label="Country"
  description="Choose your country of residence."
  prompt="Select a country"
  options={[{"United States", "us"}, {"Canada", "ca"}, {"United Kingdom", "uk"}]}
/>
  

Textarea

Use type="textarea" for multi-line text input.

Textarea

Bio

Tell us about yourself.

Disabled

Use the disabled attribute to prevent interaction.

Disabled

With Form

The input component integrates seamlessly with Phoenix forms using the field attribute. Errors from the changeset are displayed automatically after interaction.

    <.form for={@form} phx-change="validate" 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."
  />
  <.button type="submit">Submit</.button>
</.form>
  

Complete Example

A live form with changeset-based validation. Errors appear only after you interact with each field. Try tabbing through, or hit Register with empty fields.

Registration Form

    <.form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:name]} type="text" label="Name" placeholder="Jane Smith" />
  <.input
    field={@form[:email]}
    type="email"
    label="Email"
    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[:terms]}
    type="checkbox"
    label="I agree to the terms of service"
  />
  <div class="pt-2">
    <.button type="submit">Register</.button>
  </div>
</.form>
  