Fieldset | Components

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.

UsageGuidelinesAPI

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

ReactVanilla

<FieldSet>
  <FieldSetLegend>Select an animal</FieldSetLegend>
  <Box>
    <RadioButton id="otter" name="animals" value="otter" />
    <label htmlFor="otter">Otter</label>
  </Box>
  <Box>
    <RadioButton id="panda" name="animals" value="panda" />
    <label htmlFor="panda">Panda</label>
  </Box>
</FieldSet>

<FieldSet>
  <FieldSetLegend>Select an animal</FieldSetLegend>
  <Box>
    <RadioButton id="otter" name="animals" value="otter" />
    <label htmlFor="otter">Otter</label>
  </Box>
  <Box>
    <RadioButton id="panda" name="animals" value="panda" />
    <label htmlFor="panda">Panda</label>
  </Box>
</FieldSet>

<fieldset class="swan-fieldset">
  <legend>Select an animal</legend>
  <div>
    <input
      id="otter"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="otter"
    /><label for="otter">Otter</label>
  </div>
  <div>
    <input
      id="panda"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="panda"
    /><label for="panda">Panda</label>
  </div>
</fieldset>

<fieldset class="swan-fieldset">
  <legend>Select an animal</legend>
  <div>
    <input
      id="otter"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="otter"
    /><label for="otter">Otter</label>
  </div>
  <div>
    <input
      id="panda"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="panda"
    /><label for="panda">Panda</label>
  </div>
</fieldset>

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

ReactVanilla

<fieldset>
  <legend>Select an animal</legend>
  <div>
    <RadioButton id="otter" name="animals-fs" value="otter" />
    <label htmlFor="otter">Otter</label>
  </div>
  <div>
    <RadioButton id="panda" name="animals-fs" value="panda" />
    <label htmlFor="panda">Panda</label>
  </div>
</fieldset>

<fieldset>
  <legend>Select an animal</legend>
  <div>
    <RadioButton id="otter" name="animals-fs" value="otter" />
    <label htmlFor="otter">Otter</label>
  </div>
  <div>
    <RadioButton id="panda" name="animals-fs" value="panda" />
    <label htmlFor="panda">Panda</label>
  </div>
</fieldset>

<fieldset>
  <legend>Select an animal</legend>
  <div>
    <input
      id="otter"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="otter"
    /><label for="otter">Otter</label>
  </div>
  <div>
    <input
      id="panda"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="panda"
    /><label for="panda">Panda</label>
  </div>
</fieldset>

<fieldset>
  <legend>Select an animal</legend>
  <div>
    <input
      id="otter"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="otter"
    /><label for="otter">Otter</label>
  </div>
  <div>
    <input
      id="panda"
      name="animals"
      type="radio"
      aria-label="radio"
      class="swan-radio"
      value="panda"
    /><label for="panda">Panda</label>
  </div>
</fieldset>

ReactVanilla

<FieldSet>
  <FieldSetLegend>legend text goes here</FieldSetLegend>
  some form fields go here
</FieldSet>

<FieldSet>
  <FieldSetLegend>legend text goes here</FieldSetLegend>
  some form fields go here
</FieldSet>

<fieldset class="swan-fieldset">
  <legend>legend text goes here</legend>
  some form fields go here
</fieldset>

<fieldset class="swan-fieldset">
  <legend>legend text goes here</legend>
  some form fields go here
</fieldset>

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 using VisuallyHidden see docs here.
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.