Variants
Example of Fieldsets - default
<BcFieldset legendContent='The fieldset legend'> <p>This paragraph represents the fieldset’s children form content.</p> </BcFieldset>
React documentation
Last modified:
Use BcFieldset to group and give context to related form elements.
BcFieldset Props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| children | JSX | true | Used to display contents for the fieldset. | |
| legendContent | JSX | true | Used to define a caption for the <fieldset> element. | |
| showLegend | boolean | false | false | Used to set .bc-fieldset--visible on the <fieldset> (defaults to false, viz., visually hidden). |
| unbordered | boolean | false | false | Used to remove default border around a legend when it is visible. |
HTML
Last modified:
ℹ️ Default styling: The default fieldset style has no visual container styles. It also sets the <legend> as visually hidden (while accessible to assistive technologies, eg screen readers).
Fieldset use cases
Use a <fieldset> to group and give context to related form elements, including:
- Radio buttons
- Checkboxes
- Related input fields (eg username and password).
Using <legend>
Each fieldset must have a <legend>. The legend should give a brief and clear context for the grouped form elements.
The legend must be the immediate first child of the <fieldset>.
For example, a boolean on/off radio button group should be wrapped by a fieldset and given a <legend> to describe what is being turned on/off, since the ‘On’ and ‘Off’ strings are the respective <label>s for the radio buttons.
Do not use the <legend> as a replacement for each input’s individual <label>.
Avoid nesting fieldsets.
Design
Last modified:
The following variants are available:
| Variant | Purpose |
|---|---|
.bc-fieldset--visible | Makes a legend visible inside fieldset. |
.bc-fieldset--unbordered | Removes default border around a legend when it is visible. |
Accessibility
Last modified:
Grouping form elements with ARIA
If a fieldset and legend are not viable ARIA markup can be used to achieve the same effect.
Rationale
Last modified:
The fieldset element is used to group several controls as well as labels within a web form.
HTML fieldsets and legends have good screen reader support.
See also
Last modified:
- Labels (Forms)
- Hints (Components)