name: Form fieldset
description: The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
body: |
  [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/)

  You can use the `text` property or pass `text` as a block.
accessibility_criteria: |
  - must give inputs within the fieldset context with legend text
uses_component_wrapper_helper: true
examples:
  default:
    data:
      legend_text: 'Do you have a passport?'
      block: |
        <!-- example content -->
          <%= render "govuk_publishing_components/components/radio", {
            name: "default",
            items: [
              {
                value: "default-yes",
                text: "Yes"
              },
              {
                value: "default-no",
                text: "No"
              }
            ]
          } %>
          <!-- end of example content -->
  with_id_attribute:
    data:
      legend_text: 'Do you have a passport?'
      id: passports
      block: |
        <!-- example content -->
          <%= render "govuk_publishing_components/components/radio", {
            name: "passport",
            items: [
              {
                value: "passport-yes",
                text: "Yes"
              },
              {
                value: "passport-no",
                text: "No"
              }
            ]
          } %>
          <!-- end of example content -->
  with_heading:
    description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
    data:
      legend_text: 'Do you have a driving license?'
      heading_level: 2
      heading_size: 'm'
      block: |
        <!-- example content -->
          <%= render "govuk_publishing_components/components/radio", {
            name: "level",
            items: [
              {
                value: "level-yes",
                text: "Yes"
              },
              {
                value: "level-no",
                text: "No"
              }
            ]
          } %>
          <!-- end of example content -->
  with_custom_legend_size:
    description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
    data:
      legend_text: 'Do you have a driving license?'
      heading_size: 'l'
      block: |
        <!-- example content -->
          <%= render "govuk_publishing_components/components/radio", {
            name: "size",
            items: [
              {
                value: "size-yes",
                text: "Yes"
              },
              {
                value: "size-no",
                text: "No"
              }
            ]
          } %>
          <!-- end of example content -->
  with_error_message:
    description: The component also accepts an `error_id`, or generates one automatically.
    data:
      legend_text: 'Do you have a passport?'
      error_message: 'Please choose an option'
      block: |
        <!-- example content -->
          <%= render "govuk_publishing_components/components/radio", {
            name: "default2",
            items: [
              {
                value: "default2-yes",
                text: "Yes"
              },
              {
                value: "default2-no",
                text: "No"
              }
            ]
          } %>
          <!-- end of example content -->