Fieldset component

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>

Fieldset legend prop

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="Lable">
  <: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>