View Source SaladUI.Form (SaladUI v1.0.0-beta.3)
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)
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 tonil
.- 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 tonil
.- 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 tonil
.field
(Phoenix.HTML.FormField
) - a form field struct retrieved from the form, for example: @form[:email]. Defaults tonil
.for
(:string
) - Defaults tonil
.error
(:boolean
) - whether the field has an error. Defaults tofalse
.- 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 tonil
.errors
(:any
) - a list of error messages to display. Defaults to[]
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block