Function group

Creates a group component that can contain other UI elements.

Param: optionsOrContent

Either the content to display or the options object

Param: options

Configuration object

Param: options.className

CSS class name for custom styling

Param: options.title

Title of the group that can render any React node

Param: options.description

Description text for the group that can render any React node

Param: options.collapsible

if true, the group will be collapsible

Param: options.initialCollapsed

if true, the group will be collapsed by default

Param: content

The content to display (only used when options are provided)

Returns

A JSX element representing the group component

Example

Basic usage with content

group([
  inputField({
    name: 'firstName',
    label: 'First name',
    defaultValue: 'John',
  }),
  inputField({
    name: 'lastName',
    label: 'Last name',
    defaultValue: 'Doe',
  }),
]);

Example

Usage with options and content

group(
  {
    className: 'custom-group',
    title: 'Personal Information',
    description: 'Please fill in your details',
    collapsible: true,
    initialCollapsed: false
  },
  [
    inputField({
      name: 'email',
      label: 'Email',
      type: 'email',
    }),
  ]
);

Settings