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?"
} do %>
  <!-- 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>
<% 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 %>
  <!-- Use the radio component, this is hardcoded only for this example -->
  <input type="radio" id="passport-yes" name="default">
  <label for="passport-yes">Yes</label>

  <input type="radio" id="passport-no" name="default">
  <label for="passport-no">No</label>
<% 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 %>
  <!-- Use the radio component, this is hardcoded only for this example -->
  <input type="radio" id="level-yes" name="default">
  <label for="level-yes">Yes</label>

  <input type="radio" id="level-no" name="default">
  <label for="level-no">No</label>
<% 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 %>
  <!-- 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>
<% 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 %>
  <!-- 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>
<% end %>