Fieldset

Unable to parse html

const PreviewEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Which fjord arm do you live by?</Fieldset.Legend>
      <Fieldset.Description>
        The choice will help us improve the content we show you.
      </Fieldset.Description>
      <Radio label='Barsnesfjorden' name='radio' value='barsnesfjorden' />
      <Radio label='Eidsfjorden' name='radio' value='eidsfjorden' />
      <Radio label='None of these' name='radio' value='none-of-these' />
    </Fieldset>
  );
};

render(<PreviewEn />)

Use fieldset when

• you have a group or list of multiple radio or checkbox components that naturally belong together
• a form needs to be divided into sections with explanatory headings
• several fields naturally belong together such as contact information

Avoid fieldset when

• you are grouping elements that are not part of a form
• the fields do not share a common purpose

Example

A single checkbox in a fieldset

Even if a group consists of only one checkbox or radio, it should still be placed inside a fieldset. This gives the choice a clear label through <legend>, and screen reader users understand what they are confirming.

Unable to parse html

const WithCheckboxEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Do you accept the terms?</Fieldset.Legend>
      <Checkbox label='Yes, I accept' value='agree' />
    </Fieldset>
  );
};

render(<WithCheckboxEn />)

Legend as a heading

Using the question itself as a heading is good practice in many cases, because screen reader users then hear the question only once.

On pages with several input fields that relate to the same question, it is easier for screen reader users if the question is a heading. This makes it clearer that all the fields that follow belong to the group indicated by the heading.

In the example below, we use an <h1>, which would act as the main heading of the page, together with the <legend>.

Unable to parse html

const LegendAsHeadingEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>
        <h1>Where are you going to travel?</h1>
      </Fieldset.Legend>
    </Fieldset>
  );
};

render(<LegendAsHeadingEn />)

Guidelines

When using fieldset, start with a <legend> that explains what the fields below relate to. This may be a question such as “Where do you currently live?” or a descriptive phrase like “Personal details”. This helps users understand the relationship between the fields and what they need to fill in.

Text

Avoid using the same text in both <label> and <legend>. Include helper text if it makes the form easier to complete. Note that the description is not associated with the input fields. Keep the text as short as possible.

Read more about how to write labels and questions in forms.