Newskit Logo
View Github

Layout

Fieldset

The Fieldset is used to provide contextual information around a group of form controls in a web form.

Status

Supported

Introduced

v5.0.0
View code

Status

Supported

Introduced

Anatomy

The Fieldset contains two required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The Fieldset has options that can be used to provide an appropriate experience for different use cases.

Legend

The Fieldset has a caption that gives a title attributed to the elements that appear in the Fieldset, called a Legend.

Size

There are three sizes of Fieldset Legend; small, medium, and large.

Note

The size of the Legend, and any Form selection controls, Labels, and Assistive Text can also be customised as required.

Legend

The Fieldset has a caption that gives a title attributed to the elements that appear in the Fieldset, called a Legend.

Size

There are three sizes of Fieldset Legend; small, medium, and large.

Note

The size of the Legend, and any Form selection controls, Labels, and Assistive Text can also be customised as required.

States

The Fieldset has the following states:

Base

The Fieldset has a base (default) state.

Disabled

The Fieldset in a disabled state communicates that the grouped form selection controls exist, but are not available to the user in that scenario. Disabled Fieldsets are often used to maintain layout consistency in a Form, and communicate that a form selection control may become available if another condition has been met. The style of the Legend (colour) also changes to indicate that the form selection controls grouped with the Fieldset are disabled.

Form structure

The below diagram outlines how form controls are grouped together using the Fieldset, and wrapped with the Form component that applies validation:

Accessibility Considerations

The Fieldset has the following accessibility considerations:

Legend

The legend is a caption that provides a higher-level description of the form controls in a group, which is important, particularly for users with screen readers. Provide details for the function or purpose of the form controls within a Fieldset using the legend.

The legend will be repeated to users with screen readers for each form control within a Fieldset.

Focus order
OrderElementRole
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

SEO

If another form of phrasing content is used (eg. an image, or button), ensure that Alt Text is applied if required.

API

The Fieldset has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?