Fieldset
<gcds-fieldset>

Also called: form field.

A fieldset is a group of multiple form components or elements.

• GitHub
• Figma

Fieldset anatomy

A fieldset combines the <fieldset> and <legend> elements to accessibly group together related form fields or components – without solely relying on visual layout.

1. The fieldset legend provides the caption for the contents of the group of form components. The legend can be a short descriptive statement or a call to action phrase. Legend text is left aligned and in sentence case (only the initial letter is capitalized).
2. The fieldset hint text communicates specific requirements for the fieldset's content to support task success.
3. The component grouping is made up of each component within the fieldset.

Design and accessibility for fieldsets

Group information accessibly

• Group together form elements that are part of a task or sub-task or are related in some way.
• Group together related form components, without solely relying on visual layout, to be accessible to people with blindness or low vision.

Write fieldset content to support task success

• Write a short descriptive statement or a call to action for the legend caption.
• Use the legend as a signpost to let a person know the kind of information the fieldset group is asking them for.
• Identify the subtask in the legend to help people understand the relationship between the information you're requesting and the task they're completing.

Clarify the question or instruction for radios and checkboxes

• For radios and checkboxes, the legend sits where the input label usually is on other form components. Replace a question in the legend with a statement for a shorter, clearer caption.
• Use the fieldset hint text to give additional context to a person on how to respond. For a checkbox, the fieldset hint text could state, "Select all applicable options". For a radio, hint text could state "Select the response that best applies".
• Avoid using a fieldset when a form component has a single option for response and no selection is required.