Doggo Storybook 0.9.0

Field Group

Use the field group component to visually group multiple inputs in a form.

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.

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