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 RadioGroup, 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.
Be sure to localize the
By default, the
legend is visible above the items in the Fieldset. However, if the form items are labeled 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".
Component quality checklist
Component is not currently available in Figma.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.