1. Government Frontend Component Guide
  2. Form fieldset

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 all)

Do you have a passport?

How to call this component

<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: "Do you have a passport?",
  text: sanitize("<!-- Use the radio component, this is hardcoded only for this example -->
    <input type=\"radio\" id=\"default-yes\" name=\"default\">
    <label for=\"default-yes\">Yes</label>
    
    <input type=\"radio\" id=\"default-no\" name=\"default\">
    <label for=\"default-no\">No</label>
    ")
} %>

Accessibility acceptance criteria

  • must give inputs within the fieldset context with legend text

Other examples

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",
  text: sanitize("<!-- Use the radio component, this is hardcoded only for this example -->
    <input type=\"radio\" id=\"size-yes\" name=\"default\">
    <label for=\"size-yes\">Yes</label>
    
    <input type=\"radio\" id=\"size-no\" name=\"default\">
    <label for=\"size-no\">No</label>
    ")
} %>

With html legend (preview)

If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a captured title

Do you have a passport?

<%= render "govuk_publishing_components/components/fieldset", {
  legend_text: sanitize("<!-- Use the title component, this is hardcoded only for this example -->
    <h1 style=\"font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin: 0 0 30px 0;\">
      Do you have a passport?
    </h1>
    "),
  text: sanitize("<!-- Use the radio component, this is hardcoded only for this example -->
    <input type=\"radio\" id=\"html-legend-yes\" name=\"html-legend\">
    <label for=\"html-legend-yes\">Yes</label>
    
    <input type=\"radio\" id=\"html-legend-no\" name=\"html-legend\">
    <label for=\"html-legend-no\">No</label>
    ")
} %>

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",
  text: sanitize("<!-- Use the radio component, this is hardcoded only for this example -->
    <input type=\"radio\" id=\"default2-yes\" name=\"default2\">
    <label for=\"default2-yes\">Yes</label>
    
    <input type=\"radio\" id=\"default2-no\" name=\"default2\">
    <label for=\"default2-no\">No</label>
    ")
} %>