SaladUI

Form

Implement of form component. SaladUI doesn’t define its own form, but it provides a set of form-related components to help you build your own form.

Read more Read less

Reuse .form from live view Component, so we don’t have to duplicate it

Examples:

<div>
  <.form
    class="space-y-6"
    for={@form}
    id="project-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save"
  >
    <.form_item>
    <.form_label>What is your project's name?</.form_label>
    <.form_control>
        <Input.input field={@form[:name]} type="text" phx-debounce="500" />
      </.form_control>
      <.form_description>
          This is your public display name.
    </.form_description>
    <.form_message field={@form[:name]} />
    </.form_item>
    <div class="w-full flex flex-row-reverse">
      <.button
        class="btn btn-secondary btn-md"
        icon="inbox_arrow_down"
        phx-disable-with="Saving..."
      >
        Save project
        </.button>
    </div>
      </.form>
</div>
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>