<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Fieldset

A <fieldset> groups several related form-fields (and their <label>s) together within a single <form>. A <legend> inside of a <fieldset> provides a caption that describes the field grouping.

A <fieldset> groups several related form-fields (and their <label>s) together within a single <form>. A <legend> inside of a <fieldset> provides a caption that describes the field grouping.

The default browser-defined styling for a <fieldset> and <legend> doesn't fit with our desired style, so SWAN features its own Fieldset component that overrides the default. This lets you make use of the nice accessibility benefits of <fieldset> and <legend> without having to use the browser's default visuals.

Usage

The preview has been updated.

For comparison, here is a <fieldset> with the default styling:

The preview has been updated.

Share
Share

Accessibility

  • All <fieldset> tags must have a <legend> tag that labels them, for accessibility. If the information in the legend is superfluous to sighted users, the legend can be hidden on screens by making it.
  • The <legend> cannot be (or contain) a heading (H1-H6) tag. If the page structure requires a heading to label the form fields, don't use a <fieldset> tag. Instead, group them using a wrapper tag that has the role="radiogroup" attribute (for radio buttons) or role="group" attribute (for everything else), plus an aria-labelledby attribute whose value is the id of the heading.

Implementation

  • Note: the React component is spelled FieldSet with a capital "S", as if "field set" were two words, whereas the HTML tag is <fieldset>. This was an oversight; sorry.
  • Fieldsets are for sets of form elements. If there is a single form element, don't use a fieldset.

Props

FieldSetLegend
This component is implemented using the <legend /> as the root element. You can utilize the native attributes supported by <legend /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
FieldSet
This component is implemented using the <fieldset /> as the root element. You can utilize the native attributes supported by <fieldset /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.

Published: Jan 25, 2022Last updated: Sep 3, 2024
Previous
Error Boundary
Error Boundary
Next
File Input
File upload component