Fieldset
Fieldset is used to group related form elements together.
- Fieldsets should be used for grouping radio buttons and checkboxes
- Legends can be used to describe the group
- Legends should display a required indicator if the group is not optional
Form Section Example
Field Group Example
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Form Groups
Form groups are used to group related form elements together within a form
Field Groups
Field groups are used to group related form elements together outside of a form - mostly used fro Radio and Checkbox groups.
On this page
The Fieldset component groups form fields together with a shared legend and helper/error text.
import { Fieldset, FieldsetParts } from '@cerberus/react'Form Section Example
The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).
Field Group Example
When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.
Primitives
You can utilize the primitive components to customize the Fieldset.
| Component | Description |
|---|---|
| FieldsetRoot | The context provider for the Fieldset parts |
| FieldsetLegend | The label of the fieldset |
| FieldsetHelperText | The label description for the Fieldset |
| FieldsetErrorText | The error message for the Fieldset |
API
Props
The Fieldset component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| usage | fieldGroup | The type of fieldset to display. |
The Fieldset component also accepts all the props of the FieldsetRoot primitive props
Parts
The FieldsetParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The FieldsetRoot component which is the Provider for the family. |
| Legend | The FieldsetLegend component which displays the label. |
| HelperText | The FieldsetHelperText component which displays the description text. |
| ErrorText | The FieldsetErrorText component which displays the error text when the group is marked invalid. |
On this page
Use Cases
- Users should be able to:
- Navigate to and activate a input field with assistive technology
- Receive and understand supporting text and error messages
- Navigate to and select interactive icons
Interaction & Style
The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a textfield is typically the same as the label for the textfield.
On this page