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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
rest :global Any additional HTML attributes.
Required inner_block * :slot 
<.field type="text" field={f[:given_name]} label="Given name" />
<.field type="text" field={f[:family_name]} label="Family name" />