Wraps a control with an associated label, help text, and error message.

Splat the slot argument onto the control so the ids line up:

Examples

<.field :let={f} id="email" label="Email" help="We never share it." required>
  <.input {f} type="email" name="user[email]" />
</.field>

<.field :let={f} id="bio" label="Bio" error={@errors[:bio]}>
  <.textarea {f} name="user[bio]" />
</.field>

Attributes

• id (:string) - base id; control/label/help/error ids derive from it deterministically. Defaults to nil.
• label (:string) - visible label text. Defaults to nil.
• help (:string) - supporting hint rendered under the control. Defaults to nil.
• error (:string) - validation message; when present the field is marked invalid and wired via aria-errormessage. Defaults to nil.
• required (:boolean) - shows a required indicator on the label. Defaults to false.
• optional (:boolean) - shows an (optional) hint on the label; ignored when required. Defaults to false.
• Global attributes are accepted.

Slots

• inner_block (required) - The control. Receives a map %{id, invalid, describedby, errormessage, required} that can be splatted onto input/1 or textarea/1 to complete the wiring.

A validation message. Uses role="alert" so it is announced when it appears; reference its id from the control's aria-errormessage.

Examples

<.field_error id="email-error">Enter a valid email.</.field_error>

Attributes

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

Slots

• inner_block (required)

Supporting help text for a control. Give it an id and reference that id from the control's aria-describedby.

Examples

<.help_text id="pw-help">Use at least 12 characters.</.help_text>

Attributes

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

Slots

• inner_block (required)

A single-line text control. Supports type (text/email/password/url/tel/number/search), prefix/suffix adornments, a live-ready character count, and every relevant state: hover, focus, filled, disabled, readonly, and invalid.

Examples

<.input name="q" type="search" placeholder="Search" />
<.input field={@form[:email]} type="email" autocomplete="email" />
<.input name="handle" show_count maxlength={30} value={@handle}>
  <:prefix>@</:prefix>
</.input>

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• type (:string) - Defaults to "text". Must be one of "text", "email", "password", "url", "tel", "number", or "search".
• field (Phoenix.HTML.FormField) - a form field; derives id/name/value and errors when set. Defaults to nil.
• placeholder (:string) - Defaults to nil.
• autocomplete (:string) - Defaults to nil.
• disabled (:boolean) - Defaults to false.
• readonly (:boolean) - Defaults to false.
• invalid (:boolean) - force the invalid visual + aria-invalid. Defaults to false.
• required (:boolean) - Defaults to false.
• maxlength (:integer) - native max length; also caps the count display. Defaults to nil.
• show_count (:boolean) - render a character count (needs a value; pairs with maxlength). Defaults to false.
• help (:string) - inline help when used standalone (omit inside <.field>). Defaults to nil.
• error (:string) - inline error when used standalone (omit inside <.field>). Defaults to nil.
• describedby (:string) - extra id(s) to reference; supplied by <.field>. Defaults to nil.
• errormessage (:string) - id of an external error node; supplied by <.field>. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocapitalize", "autocorrect", "spellcheck", "inputmode", "pattern", "min", "max", "step", "list", "form", "phx-debounce", "phx-change", "phx-blur", "phx-focus", "phx-keyup", "phx-keydown"].

Slots

• prefix - leading adornment (icon/text); decorative.
• suffix - trailing adornment (icon/text); decorative.

A control label. Renders a real <label for> and, when asked, a required or optional indicator with a screen-reader-friendly equivalent.

Examples

<.label for="email" required>Email</.label>

Attributes

• for (:string) - id of the control this labels. Defaults to nil.
• id (:string) - Defaults to nil.
• required (:boolean) - Defaults to false.
• optional (:boolean) - Defaults to false.
• Global attributes are accepted.

Slots

• inner_block (required)

A multi-line text control. Same association, count, and state handling as input/1. Set autosize to opt into an optional grow-to-fit enhancement.

Examples

<.textarea name="notes" rows={5} placeholder="Notes" />
<.textarea field={@form[:bio]} show_count maxlength={280} autosize />

Attributes

• id (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• field (Phoenix.HTML.FormField) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• rows (:integer) - Defaults to 3.
• disabled (:boolean) - Defaults to false.
• readonly (:boolean) - Defaults to false.
• invalid (:boolean) - Defaults to false.
• required (:boolean) - Defaults to false.
• maxlength (:integer) - Defaults to nil.
• show_count (:boolean) - Defaults to false.
• autosize (:boolean) - adds data-aui-autosize so an optional JS hook can grow the box; height still works without JS. Defaults to false.
• help (:string) - Defaults to nil.
• error (:string) - Defaults to nil.
• describedby (:string) - Defaults to nil.
• errormessage (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["spellcheck", "wrap", "form", "phx-debounce", "phx-change", "phx-blur", "phx-focus", "phx-keyup"].