Vistaprint

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 Visage features its own Fieldset component that overrides the default. This lets you make use of the nice accessibility benefits of <fieldset> and <legend> without opting in to the default visuals.

Usage

Select an animal
Share
Share
jsx

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

Select an animal
Share
Share
jsx
<fieldset class="stylized-fieldset">etc</fieldset>
jsx
<FieldSet>
  <FieldSetLegend>legend text goes here</FieldSetLegend>
  some form fields go here
</FieldSet>
<fieldset class="stylized-fieldset">
  <legend>legend text goes here</legend>
  some form fields go here
</fieldset>

Components

FieldSet

FieldSet has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <fieldset/>)

FieldSetLegend

FieldSetLegend has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <legend/>)

Guidelines

Developer Guidelines

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

Accessibility Guidelines

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