Fieldset

A fieldset is an HTML element used to group related input fields within a form. It helps in organizing form elements, making the structure clearer and more accessible, particularly for screen readers. By enclosing inputs and their labels within a fieldset, you can create a logical grouping of form controls that are related in purpose. A legend element is often included within a fieldset to provide a caption or description for the group of fields. This improves the form's usability, ensuring a better user experience by visually and structurally grouping related information together.

<.fieldset space="medium" color="warning">
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
    />
  </:control>
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
    />
  </:control>
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
      checked
    />
  </:control>
</.fieldset>

A fieldset groups related form inputs, while the legend provides a title for that group. Placed at the start of the fieldset, the legend offers context and improves accessibility by clearly describing the purpose of the grouped fields, enhancing form clarity and usability.

<.fieldset legend="Label">
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
    />
  </:control>
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
    />
  </:control>
  <:control>
    <.checkbox_field
      name="example"
      label="Fieldset group of checkboxes"
      checked
    />
  </:control>
</.fieldset>