Component

Form fieldset

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.

Using the fieldset and legend elements

You can use the text property or pass text as a block.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Do you have a passport?

How to call this component

<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a passport?"
} do %>
  <!-- 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 -->
<% end %>

Accessibility acceptance criteria

  • must give inputs within the fieldset context with legend text

Other examples

With id attribute (preview)

Do you have a passport? 
<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a passport?",
  id: "passports"
} do %>
  <!-- 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 -->
<% end %>

With heading (preview)

Make the legend different sizes. Valid options are s, m, l and xl.

Do you have a driving license?

 
<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a driving license?",
  heading_level: 2,
  heading_size: "m"
} do %>
  <!-- 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 -->
<% end %>

With custom legend size (preview)

Make the legend different sizes. Valid options are s, m, l and xl.

Do you have a driving license? 
<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a driving license?",
  heading_size: "l"
} do %>
  <!-- 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 -->
<% end %>

With error message (preview)

The component also accepts an error_id, or generates one automatically.

Do you have a passport?

Error: Please choose an option 

<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a passport?",
  error_message: "Please choose an option"
} do %>
  <!-- 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 -->
<% end %>