Fieldset creates a fieldset and legend for a group of related form items, like RadioButtons or Checkboxes, in order to clearly indicate related form items.

What is your favorite pet?



The content of Fieldset, typically RadioButtons, Checkboxes or TextFields.


Caption that clearly and concisely describes the form elements grouped in the fieldset.


For most use cases, pass a string with a helpful error message (be sure to localize!). In certain instances it can be useful to make some text clickable; to support this, you may instead pass a React.Node to wrap text in Link or TapArea.


A unique identifier for this Fieldset. id must be specified when an errorMessage is added

"visible" | "hidden"

Whether the legend should be visible or not. If hidden, the legend is still available for screen reader users, but does not appear visually. See the legend visibility variant for more info.

Usage guidelines

When to Use
  • When inputs within a broader form are closely related and would benefit from a shared legend, such as TextFields for a billing address or a group of Checkboxes.
When Not to Use
  • When the fields are unrelated. Use TextFields and other input components within a <form/>.


Wrapping form fields in Fieldset creates an accessible grouping that signals to users when certain form items are related. The legend should clearly describe what information is needed from the group of items, whether they're RadioButtons, Checkboxes or TextFields.

In the example below, the pet RadioButtons are surrounded by a fieldset and include a legend of "Favorite pet". Learn more about the use of fieldset and legend.

Favorite pet


Be sure to localize the legend text.


Legend visibility

By default, the legend is visible above the items in the Fieldset. However, if the form items are labelled by content elsewhere on the page, or a more complex legend is needed, the legendDisplay prop can be used to visually hide the legend. In this case, it is still available to screen reader users, but will not appear visually on the screen.

In the example below, the "Company Account Goals" text is acting as a heading and a legend for the checkboxes, so instead of repeating another legend, we visually hide the Fieldset legend. When a user focuses on the first checkbox, a screen reader will announce "Sell more products, unchecked, checkbox, Choose up to 3 company account goals, group".

Company Account Goals

Choose up to 3. Additional information
Choose up to 3 company account goals

Error message

What languages would you like to learn?
At least 1 item must be selected

If a label is needed for a single form item (instead of a group of items), use Label.