Renders a group of checkboxes from an options list. Values submit as a list under name[], with a hidden empty value so an unchecked group still sends the key.

<.checkbox_group field={@form[:channels]} label="Notify via" options={~w(Email SMS Push)} orientation="horizontal" />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any) - list of selected values.
• label (:string) (required)
• description (:string) - Defaults to nil.
• options (:list) (required)
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• variant (:string) - Defaults to "default". Must be one of "default", or "cards".
• orientation (:string) - Defaults to "vertical". Must be one of "vertical", or "horizontal".
• required (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form"].

Renders a single error message. Use errors for multiple messages associated with the same field.

Attributes

• id (:string) - Defaults to nil.

Slots

• inner_block (required)

Renders all field errors under a single accessible description ID.

Attributes

• id (:string) (required)
• messages (:list) - Defaults to [].

Groups related controls (typically radios) under a legend.

<.fieldset legend="Plan">
  <.input type="radio" name="plan" value="free" label="Free" checked />
  <.input type="radio" name="plan" value="pro" label="Pro" />
</.fieldset>

Attributes

• legend (:string) (required)
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name"].

Slots

• inner_block (required)

Renders an input with label, description and errors.

Mirrors the API of the Phoenix generator's input/1, so it accepts a Phoenix.HTML.FormField and reads name, id, value and errors from it.

<.input field={@form[:email]} type="email" label="Email" />
<.input field={@form[:bio]} type="textarea" label="Bio" description="Keep it short." />
<.input field={@form[:role]} type="select" label="Role" options={["Admin", "Editor"]} prompt="Choose" />
<.input field={@form[:agree]} type="checkbox" label="I agree" />
<.input field={@form[:notify]} type="switch" label="Email notifications" />
<.input field={@form[:bio]} type="textarea" label="Bio" maxlength={280} counter />
<.input field={@form[:title]} label="Title" maxlength={60} counter enforce={false} />

With counter, a live "n / max" readout sits under the control and turns red at the limit. maxlength normally blocks typing past the limit; pass enforce={false} to let the user overrun and only warn (the count turns red and the control gets the invalid outline).

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• label (:string) - Defaults to nil.
• value (:any)
• description (:string) - Defaults to nil.
• type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "radio", "search", "select", "switch", "tel", "text", "textarea", "time", "url", or "week".
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• errors (:list) - Defaults to [].
• checked (:boolean) - the checked flag for checkbox, radio and switch inputs.
• prompt (:string) - the prompt for select inputs. Defaults to nil.
• options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
• multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• counter (:boolean) - live character count (uses maxlength when set). Defaults to false.
• enforce (:boolean) - false lets the user type past maxlength; the counter only warns. Defaults to true.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "step", "inputmode", "enterkeyhint"].

Slots

• prefix - adornment rendered inside the field frame, before the control. Accepts attributes:
  • interactive (:boolean) - the adornment is a control (button, select): no padding, divider.
• suffix - adornment rendered inside the field frame, after the control. Accepts attributes:
  • interactive (:boolean)

Renders a label.

Attributes

• id (:string) - Defaults to nil.
• for (:string) - Defaults to nil.
• required (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a group of radio buttons from an options list.

<.radio_group field={@form[:plan]} label="Plan" options={[{"Free", "free"}, {"Pro", "pro"}]} />
<.radio_group field={@form[:plan]} label="Plan" variant="cards" options={[
  %{label: "Free", value: "free", description: "For hobby projects"},
  %{label: "Pro", value: "pro", description: "For teams", disabled: true}
]} />

Options are strings, {label, value} tuples, or maps with :label, :value, and optional :description and :disabled.

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• value (:any)
• label (:string) (required) - the legend.
• description (:string) - Defaults to nil.
• options (:list) (required)
• field (Phoenix.HTML.FormField)
• errors (:list) - Defaults to [].
• variant (:string) - Defaults to "default". Must be one of "default", or "cards".
• orientation (:string) - Defaults to "vertical". Must be one of "vertical", or "horizontal".
• required (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form"].