| Name | Description | Default | Type |
|---|---|---|---|
children* | The content of the Field Group. | | ReactNode |
actions | An array of actions to add to the header. | | Action[] |
additionalInfo | Provides additional info relevant to the field group. | | { content: string | Element; heading: string;} |
className | Additional CSS classes. | | string |
collapsible | If true, the Field Group will be able to collapse the content of its children by clicking on the name. | false | boolean |
defaultCollapsed | If true, the Field Group will be collapsed on the first render. | false | boolean |
description | A description of the field group to be displayed above the controls. | | string |
name | The name associated with the Field Group. | | string |
ref | A reference to the wrapping element. | | Ref<HTMLFieldSetElement> |
FieldGroup
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The FieldGroup component logically groups sections within a Form or group of data.
Usage
FieldGroups can be set to be collapsible and may even be set as defaultCollapsed. The content of a FieldGroup should be passed in as the component's children. Additional actions for a Form may be passed to the FieldGroup component to be rendered below all other content.
FieldGroups should include a meaningful name that represents the Form or content within. The name, if provided, will set the aria-label property of the associated <fieldset/>, as well as display as a header to the content. An optional description region may be added to a FieldGroup to provide additional context on the content within.
Example
FieldGroupList
If you have a larger view that requires multiple FieldGroups, consider using a FieldGroupList. The FieldGroupList component takes a list of FieldGroup props as items and will render each group as it appears in the list vertically on screen.
If an onDelete callback function is provided, then each FieldGroup in the list will include an inline delete action alongside its header. If an onAdd callback function is provided, an add action will be appended to the end of the list. These functions can be leveraged to manipulate the state of the list.