Fieldset

Fieldset groups related elements in a form.

Overview

A fieldset groups related fields together in a logical set to create a hierarchy that helps the user understand and complete related inputs. There can be multiple fieldsets in one form.

Anatomy

Fieldset Anatomy
  1. Legend: Text that describes the purpose of the fieldset.
  2. Description (optional): Provides additional context about the fieldset or the information that needs to be input.
  3. Fields: Inputs grouped within the fieldset.

Demo

Open the component in Figma.

When to use

To group related fields in a form.

When not to use

When fields aren’t related, wrap them in a form without using a fieldset. See Form.

Similar components

Behaviors

Fieldset-level error

If your form uses fieldsets, then a group error can appear above the fieldset in a callout. This allows multiple errors in a section to be highlighted closer to the affected inputs.

Fieldset Level Error

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.

Content guidelines

Legend

  • The title of the fieldset.
  • Makes the relationship between the fields grouped in a fieldset clear.
  • The legend is always visible.
  • The legend should be short and clear — ideally one to five words and never longer than one line of text.
  • Legends should typically be nouns. For example, User information not Enter user information.
  • Write in sentence case (capitalize the first word and proper nouns only).
  • Don’t use colons after legends.

Description (optional)

  • Provides additional context about the fieldset or the information that needs to be input.
  • A description should be limited to a single line, though multiple lines can be allowed sparingly if there isn’t a concise way to explain the set.
  • Write in sentence case (capitalize the first word and proper nouns only) and use full sentences with punctuation.
  • If the description repeats the title, don’t include it.

Fields

  • Inputs grouped within the fieldset. Group the fields to help users understand what is required of them in a logical way.
  • These can be: checkbox, date picker, radio group, select and text field.
  • See the appropriate component’s content guidelines for specific content guidance.

 

Content accessibility

All fields are required to have an accessible label visible. Search fields are an exception to this and use placeholder text and an aria-label.