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
Basic Example
Disabled Fieldset
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Field Groups
Standard groups are used to group related form elements together. These are mostly used for radio buttons and checkboxes.
Disabled Field Groups
The Fieldset natively distributes the disabled state to all the inputs within it.
Required Labels
Required labels for fieldsets are displayed using the required prop on the Legend component.
Placement
Fieldset should wrap the group of inputs it is associated with. The legend can be placed above or below the group of inputs in the code - the browser will always render it at the top.
On this page
import { Fieldset, FieldsetLabel, Legend } from '@cerberus/react'Usage
Disabled
Required
Customizing
API
Field
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeFieldset
export type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>
define function Fieldset(props: FieldsetProps): ReactNodeThe Fieldset component accepts the same props as a native fieldset element.
FieldsetLabel
export type FieldsetLabelProps = LabelProps & LabelVariantProps
define function FieldsetLabel(props: FieldsetLabelProps): ReactNodeThe FieldsetLabel component accepts the same props as the Label component.
Legend
export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
define function Legend(props: LegendProps): ReactNodeThe Legend component accepts the same props as a native legend element and Label.
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