Function: group()

Call Signature

function group(content: GroupContent): Element;

Defined in: src/UI/blocks/group.tsx:61

Group component containing other UI elements.

Parameters

Parameter	Type	Description
content	GroupContent	Content to display when first parameter is options object

Returns

Element

Examples

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',
    }),
  ]
);

Basic usage with content

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

Remarks

Do NOT use the following components as direct children of group:

• bubble, modal, shield, splitView - These are container components and should be used as the root element in showUI, not inside group
• headerBar, navigationBar - These should be direct children of container components (bubble, modal, etc.), not of group

Call Signature

function group(options: GroupOptions, content: GroupContent): Element;

Defined in: src/UI/blocks/group.tsx:62

Group component containing other UI elements.

Parameters

Parameter	Type	Description
options	GroupOptions	-
content	GroupContent	Content to display when first parameter is options object

Returns

Element

Examples

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',
    }),
  ]
);

Basic usage with content

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

Remarks

Do NOT use the following components as direct children of group:

• bubble, modal, shield, splitView - These are container components and should be used as the root element in showUI, not inside group
• headerBar, navigationBar - These should be direct children of container components (bubble, modal, etc.), not of group