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.

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.

ReactVanilla

CopySharePrettify

<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>

CopySharePrettify

<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:

The preview has been updated.

ReactVanilla

CopySharePrettify

<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>

CopySharePrettify

<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

CopyShare

<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>

CopyShare

<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.