Last modified:

Wrappers for related form elements.


Example of Fieldsets - default

<BcFieldset legendContent='The fieldset legend'>
  <p>This paragraph represents the fieldset’s children form content.</p>

React documentation

Last modified:

Use BcFieldset to group and give context to related form elements.

BcFieldset Props

childrenJSXtrueUsed to display contents for the fieldset.
legendContentJSXtrueUsed to define a caption for the <fieldset> element.
showLegendbooleanfalsefalseUsed to set .bc-fieldset--visible on the <fieldset> (defaults to false, viz., visually hidden).
unborderedbooleanfalsefalseUsed to remove default border around a legend when it is visible.


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.


Last modified:

The following variants are available:

.bc-fieldset--visibleMakes a legend visible inside fieldset.
.bc-fieldset--unborderedRemoves default border around a legend when it is visible.


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.


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)