The Fieldset component groups form fields together with a shared legend and helper/error text.
import { Fieldset, FieldsetParts } from '@cerberus/react'The Fieldset component can be used to group related form elements together using the usage prop which can be either formSection or fieldGroup (default).
When use need to label a group of Radio or Checkbox inputs, use the usage prop with the value fieldGroup.
You can utilize the primitive components or the css prop 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 |
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
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