Anatomy
The Fieldset contains two required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
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
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
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:
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.
| Order | Element | Role |
|---|
| Element | Attribute | Value | Description | User 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.
| Name | Type | Default | Description | Required |
|---|
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.
| Feature | Description | Status |
|---|