Fieldset
A fieldset groups multiple options or form fields together under one question.
The Fieldset component is a group containing multiple form elements such as checkboxes, radio buttons, inputs, textareas, or selects. It is an important semantic that helps screen readers understand the relationship between a meaningful label and the many form elements associated with it. Fieldsets appear similar to the Form group component, however, they are used for different input types and may even contain form group components.
Details
- Honeycrisp: Form group molecule
- Customization: Design tokens and Styles
- Modifier:
.cfa-legend
,.cfa-hint
,.cfa-checkbox
,.cfa-radio
The Fieldset includes the checkbox component, radio button component, and other components that do not have dedicated documentation in the USWDS (labels and hints). The visual appearance is modified using design tokens from the Honeycrisp Form elements atom and Form group molecule. Further customization is applied using the CSS modifiers .cfa-legend
, .cfa-hint
, .cfa-checkbox
, .cfa-radio
to add styles defined in custom stylesheets.
Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.
Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.
Examples
Guidance
Fieldsets vs. form groups. Form questions with multiple form elements, such as multi-part text inputs, checkboxes, or radio buttons, may use the fieldset component to group themselves with a single question (or legend
element). Use the form group component to associate one form element with one question, such as a text input, text area, or select.
Checkbox options. Refer to checkbox documentation.
Radio button options. Refer to radio button documentation.
Memorable date. Refer to memorable date documentation.
Accessibility
Checklist Key
Design library component
Source and usage
- Sass stylesheet:
./_cfa-fieldset.scss
- Thymeleaf template fragment:
./cfa-fieldset.th.html
- Embedded Ruby (ERB) partial template:
./_cfa-fieldset.html.erb