Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Layout

Fieldset

Fieldsets provide contextual information around a group of form controls in a web form.

Status

Supported

Introduced

v5.0.0
View codeView Storybook

Anatomy

The fieldset contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The fieldset has options for different use cases:

Legend

Title the group of elements in the fieldset with a caption.

Size

The fieldset legend comes in small, medium and large. The default is medium.

You can customise the size of the legend, and any form selection controls, labels and assistive text, as required.

Legend

Title the group of elements in the fieldset with a caption.

Size

The fieldset legend comes in small, medium and large. The default is medium.

You can customise the size of the legend, and any form selection controls, labels and assistive text, as required.

States

The fieldset has the following states:

Base

The default state.

Disabled

Communicates that the grouped form selection controls exist, but aren’t available in that scenario. Disabled fieldsets maintain layout consistency in a form, and communicate that a form selection control may become available if another condition is met. The style of the legend (colour) changes to indicate that the form selection controls grouped with the fieldset are disabled.

Form structure

The diagram below shows how to use the fieldset to group form controls and wrap them with the form to apply validation:

Accessibility considerations

The fieldset has the following accessibility considerations:

Legend

The legend is a caption for a group of form controls. Use it to explain the function or purpose of the form controls.

Legends are important for users with screen readers. Screen readers will repeat the legend for each form control within a fieldset.

Focus order
OrderElementRole
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

SEO

If you’re including an image inside the fieldset, ensure alt text is applied.

API

Fieldset

The fieldset has a range of props and overrides to define the experience in different use cases, and a range of predefined elements and attributes that you can override to define their appearance.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?