> 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: Display Groups

## Article: Display Groups

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

## Article Content:

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


# Display Groups
Display groups let you combine related properties into single controls, link properties together, or control display order in the editor's auto-generated panels. Without display groups, the editor renders individual controls for each property, sorted by property type.

## Where to define

You can define `displayGroups` in [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) of type `inlineElement`.

Display groups fall into 3 categories:

- **[Shorthand Mapping Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/shorthand-mapping-groups.md)**: Combine multiple CSS custom properties into a single compact shorthand control in the design panel, such as a border or font control.
- **[Ordering and Sectioning Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/ordering-and-sectioning-groups.md)**: Control the order and grouping of data items, CSS properties, presets, or other display groups in panels.
- **[Composite Control Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md)**: Coordinate CSS custom properties and data items for text editing, array management, and item display.

> **Note**: [Display filters](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-filters.md) and display groups operate independently. Display filters remove properties before the editor panel receives them. Display groups organize whatever properties remain.

## Display group properties

Each key in the `displayGroups` map is a custom name you choose for the group (for example, `outerPadding` or `cardBorder`), and each value is an object with the following properties:

<PropertyList bordered>
  <Property
    name="displayName"
    type="string"
    description="Label shown in the editor for this group. Maximum 20 characters. Translatable."
  />
  <Property
    name="groupType"
    type="string"
    required
    description={<>Determines the group behavior and the name of the sibling configuration key. For example, setting groupType: 'padding' means you must also add a padding key at the same level. See <a href="fallback::#group-type-categories">Group type categories</a> for all available values.</>}
  />
</PropertyList>

### Type-specific configuration

Each group type requires additional configuration beyond the core fields. When you set a `groupType`, you must also add a sibling key with the same name that contains the type-specific configuration.

For example, a `padding` group type requires a `padding` key with the property mapping:

```typescript
displayGroups: {
  outerPadding: {
    displayName: 'Outer Padding',
    groupType: 'padding',
    padding: {
      top: 'myPaddingTop',
      right: 'myPaddingRight',
      bottom: 'myPaddingBottom',
      left: 'myPaddingLeft',
    },
  },
}
```

For details on each type and its configuration options, see the type reference pages in [Group type categories](#group-type-categories).

## Group type categories

The following group types are available, organized by category. Each type has its own configuration schema.

| Category | Group Types | Description |
|----------|------------|-------------|
| [Shorthand Mapping Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/shorthand-mapping-groups.md) | `background`, `margin`, `padding`, `border`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderInlineStart`, `borderInlineEnd`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `font`, `textDecoration`, `gap` | Combine multiple CSS custom properties into a single compact shorthand control in the Design panel. Groups are type-safe: each slot only accepts properties with a matching `cssPropertyType`. |
| [Ordering and Sectioning Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/ordering-and-sectioning-groups.md) | `data`, `cssDataType`, `cssCustomProperties`, `presets`, `displayGroups` | Control the display order and grouping of manifest properties in editor panels. |
| [Composite Control Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md) | `text`, `arrayItems`, `listItem` | Coordinate CSS custom properties and data items for text editing, array management, and item display. |

## See also

- [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)
- [Composite Control Groups](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/display-groups/composite-control-groups.md)