- 1.5.0

Field Group

Groups inputs in a form visually.

Read more Read less

This component is intended for styling purposes and does not provide semantic grouping. For semantic grouping of related form elements, use the <fieldset> and <legend> HTML elements instead.

Maturity: Developing

Usage

Visual grouping of inputs:

<.field_group>
  <.field field={@form[:given_name]} label="Given name" />
  <.field field={@form[:family_name]} label="Family name"/>
</.field_group>

Semantic grouping (for reference):

<fieldset>
  <legend>Personal Information</legend>
  <.field field={@form[:given_name]} label="Given name" />
  <.field field={@form[:family_name]} label="Family name"/>
</fieldset>
Default
Open in playground 
<Phoenix.Component.form
  for={%{}}
  as={:story}
  :let={f}
  style="inline-size: 100%"
>
  <.field_group>
    <.field type="text" field={f[:given_name]} label="Given name" />
    <.field type="text" field={f[:family_name]} label="Family name" />
  </.field_group>
</Phoenix.Component.form>