The FieldGroup component logically group sections within a Form or group of data.

For more information on how to use the features and props for this component, check out the developer documentation.

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.

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.

children*ReactNodeThe content of the Field Group.
actionsAction[]An array of actions to add to the header.
classNamestringAdditional CSS classes.
collapsiblebooleanfalse If true, the Field Group will be able to collapse the content of its children by clicking on the name.
defaultCollapsedbooleanfalse If true, the Field Group will be collapsed on the first render.
namestringThe name associated with the Field Group.
refRef<HTMLFieldSetElement>A reference to the wrapping element.