Salad UI

Form

Form item component that acts as a container for a form field.

Read more Read less

Examples:

<.form_item>
  <.form_label>Email</.form_label>
  <.form_control>
    <.input field={@form[:email]} type="email" />
  </.form_control>
  <.form_message field={@form[:email]} />
</.form_item>
Form Open in playground

This is your public display name. 

<.form :let={f} for={%{}} class="w-2/3 space-y-6">
  <% f = %{f | data: %{name: ""}} %>
  <.form_item>
    <.form_label error={not Enum.empty?(f[:name].errors)}>Username</.form_label>
    <.input field={f[:name]} type="text" placeholder="saladui" phx-debounce="500" required />
    <.form_description>
      This is your public display name.
    </.form_description>
    <.form_message field={f[:name]} />
  </.form_item>
  <.button type="submit">Submit</.button>
</.form>
Form with error Open in playground

This is your public display name.

This field is required 

<.form for={%{}} :let={f} class="w-2/3 space-y-6">
    <% f = %{f | data: %{name: ""}, errors: [name: {"This field is required", []}]} %>
    <.form_item>
      <.form_label error={not Enum.empty?(f[:name].errors)}>Username</.form_label>
      <.input field={f[:name]} type="text" placeholder="saladui" phx-debounce="500" required />
      <.form_description>
        This is your public display name.
      </.form_description>
      <.form_message field={f[:name]} />
    </.form_item>
   <.button type="submit">Submit</.button>
</.form>