Input

Form input field with optional label. Integrates with Phoenix forms.

Default

With Label

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

With Label

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

Disabled

Use the disabled attribute to prevent interaction.

Disabled

With Form

The input component integrates seamlessly with Phoenix forms using the field attribute.

    <.simple_form for={@form} phx-submit="save">
  <.input field={@form[:email]} type="email" label="Email" />
  <.input field={@form[:password]} type="password" label="Password" />
  <:actions>
    <.button type="submit">Submit</.button>
  </:actions>
</.simple_form>
  