View Source SaladUI.Form (SaladUI v1.0.0-beta.1)

Form-related components that help build accessible forms.

SaladUI doesn't define its own form component, but instead provides a set of form-related components to enhance the native Phoenix LiveView form.

Examples:

<.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 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>

Summary

Functions

Form control component that wraps input elements.

Form description component that provides additional context for a form field.

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

Form label component that renders a label for a form field.

Form message component that displays validation errors for a form field.

Functions

Form control component that wraps input elements.

This is a simple pass-through component that renders its inner block.

Examples:

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

Slots

  • inner_block (required)
Link to this function

form_description(assigns)

View Source

Form description component that provides additional context for a form field.

Examples:

<.form_description>
  We'll only use your email for account-related purposes.
</.form_description>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

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

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>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Form label component that renders a label for a form field.

Shows validation errors through text color when a field has errors.

Examples:

<.form_label>Email</.form_label>
<.form_label field={@form[:email]}>Email</.form_label>

Attributes

  • class (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • for (:string) - Defaults to nil.
  • error (:boolean) - whether the field has an error. Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Form message component that displays validation errors for a form field.

Examples:

<.form_message field={@form[:email]} />

<.form_message>
  Please enter a valid email address.
</.form_message>

Attributes

  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • errors (:any) - a list of error messages to display. Defaults to [].
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block