> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Composite Control Groups

## Article: Composite Control Groups

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Composite Control Groups
Composite control groups coordinate CSS custom properties and data items for text editing, array management, and item display.

Unlike the other two categories, which operate on one property type at a time, composite control groups can pull from both `cssCustomProperties` and `data` in the same group.

## text

Groups text-related CSS custom properties and optionally data items into a single text-editing widget in the design panel. The editor already auto-groups text properties by type, so this group is most useful when you have multiple text elements and need to distinguish which font, color, and size belongs to which element.

> **Note:** Specify these additional configurations under a `text` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property name="font" type="string" description="CSS custom property key for the font shorthand." />
  <Property name="fontStyle" type="string" description="CSS custom property key for font-style." />
  <Property name="fontVariant" type="string" description="CSS custom property key for font-variant." />
  <Property name="fontWeight" type="string" description="CSS custom property key for font-weight." />
  <Property name="fontSize" type="string" description="CSS custom property key for font-size." />
  <Property name="lineHeight" type="string" description="CSS custom property key for line-height." />
  <Property name="fontFamily" type="string" description="CSS custom property key for font-family." />
  <Property name="color" type="string" description="CSS custom property key for color." />
  <Property name="letterSpacing" type="string" description="CSS custom property key for letter-spacing." />
  <Property name="textAlign" type="string" description="CSS custom property key for text-align." />
  <Property name="textTransform" type="string" description="CSS custom property key for text-transform." />
  <Property name="textShadow" type="string" description="CSS custom property key for text-shadow." />
  <Property name="textDecorationLine" type="string" description="CSS custom property key for text-decoration-line." />
  <Property name="writingMode" type="string" description="CSS custom property key for writing-mode." />
  <Property name="direction" type="string" description="Data item key for direction." />
  <Property name="a11y" type="string" description="Data item key for accessibility." />
</PropertyList>

## arrayItems

Creates the **Manage Items** panel in the editor, where Wix users can add, remove, and reorder [`arrayItems`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md#array).

Use `selectedItemIndex` to connect panel item selection to your component. When a Wix user clicks an item in the **Manage Items** panel, the editor passes that item's index to your component through the prop you specify in `selectedItemIndex`. Your component can use this value to visually reflect the selected item in the editor.

> **Note:** Specify these additional configurations under an `arrayItems` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property
    name="arrayItems"
    type="string"
    description={<>Key of a data item with dataType: <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md#array">arrayItems</a>.</>}
  />
  <Property
    name="selectedItemIndex"
    type="string"
    description={<>Key of the data item your component uses to receive the currently selected item's index from the <strong>Manage Items</strong> panel.</>}
  />
</PropertyList>

## listItem

Controls how each item appears in the **Manage Items** panel list. You assign roles to your array item's data properties so the editor knows what to show as the main title, secondary text, and thumbnail for each item.

> **Note:** Specify these additional configurations under a `listItem` field in your [display group](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md#display-group-properties).

<PropertyList bordered>
  <Property
    name="arrayItems"
    type="string"
    description={<>Key of a data item with dataType: <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md#array">arrayItems</a>.</>}
  />
  <Property name="label" type="string" description="Key of a text data item inside the array used as the main title for each item in the panel list." />
  <Property name="subtitle" type="string" description="Key of a text, link, or webUrl data item inside the array used as secondary text below the title." />
  <Property name="thumbnail" type="string" description="Key of a vectorArt or image data item inside the array used as the item's thumbnail in the panel list." />
</PropertyList>

## Examples

### Text group

Combine font, color, and text-related CSS and data properties into a single text control.

```typescript
editorElement: {
  cssCustomProperties: {
    headingFont: {
      displayName: 'Font',
      cssPropertyType: 'font',
    },
    headingSize: {
      displayName: 'Size',
      cssPropertyType: 'fontSize',
    },
    headingColor: {
      displayName: 'Color',
      cssPropertyType: 'color',
    },
    headingAlign: {
      displayName: 'Alignment',
      cssPropertyType: 'textAlign',
    },
  },
  displayGroups: {
    headingStyle: {
      displayName: 'Heading Style',
      groupType: 'text',
      text: {
        font: 'headingFont',
        fontSize: 'headingSize',
        color: 'headingColor',
        textAlign: 'headingAlign',
      },
    },
  },
}
```

### Array items and list item groups

Use `arrayItems` to open the **Manage Items** panel and connect item selection to the component. Use `listItem` to define what each item shows in the panel list.

```typescript
editorElement: {
  data: {
    menuItems: {
      dataType: 'arrayItems',
      displayName: 'Menu Items',
      arrayItems: {
        data: {
          items: {
            itemLabel: {
              dataType: 'text',
              displayName: 'Label',
              defaultValue: 'Menu Item',
            },
            itemDescription: {
              dataType: 'text',
              displayName: 'Description',
              defaultValue: 'A menu item',
            },
            itemIcon: {
              dataType: 'vectorArt',
              displayName: 'Icon',
            },
          },
        },
        maxSize: 10,
      },
    },
    selectedMenuItem: {
      dataType: 'number',
      displayName: 'Selected Item',
      defaultValue: 0,
    },
  },
  displayGroups: {
    menuManager: {
      displayName: 'Menu Items',
      groupType: 'arrayItems',
      arrayItems: {
        arrayItems: 'menuItems',
        selectedItemIndex: 'selectedMenuItem',
      },
    },
    menuItemDisplay: {
      displayName: 'Item Display',
      groupType: 'listItem',
      listItem: {
        arrayItems: 'menuItems',
        label: 'itemLabel',
        subtitle: 'itemDescription',
        thumbnail: 'itemIcon',
      },
    },
  },
}
```

## See also

- [Display Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/display-groups.md)
- [Shorthand Mapping Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/shorthand-mapping-groups.md)
- [Ordering and Sectioning Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/ordering-and-sectioning-groups.md)