---
url: /documentation/concepts/elements/groups.md
description: >-
  Configure element groups to control which elements can be inserted into
  containers, including conditional and inherited groups.
---

# Element Groups

Groups define the way in which elements can be combined (which elements can be placed inside of which elements).
This group-based approach helps to enforce a valid document structure. It is also guiding users in what they can do
and what they can't.

Use the `groups` option in an element definition to define which groups the element belongs to:

```js
groups: ['group_a', 'group_b', 'group_c']
```

Then define which elements can be placed into a container element by using the `allowedGroups` option:

```js
allowedGroups: ['group_b']
```

## Conditional groups

When working with elements that operate in multiple definitions, conditional groups can help to prevent redundancy.
For example, if you want to have the opportunity to encapsulate elements differently when defining a global element, you can use the name format `[definition-id]:[group-id]` to define your conditional group.

This would mean that the element has the given group (`group-id`), when it's in a document using the given definition (`definition-id`). This works for the `groups` option as well for `allowedGroups`.

```js
groups: ['group_x', 'global_definition:group_z']
```

## Universal Groups 

Instead of defining a list of groups, an asterisk string `"*"` can be used in the element definition to allow the element to be placed in any group:

```js
groups: '*'
```

Vice versa, the asterisk can be used in the `allowedGroups` option to allow any element to be placed inside.

:::warning
Usage of the asterisk for `allowedGroups` drastically reduces the editor's control over the document structure. Consider whether what you actually need may be [inherited groups](#inherited-groups).
:::

## Inherited Groups 

There may be instances where you need to define a renderless wrapper element which should be available in various places, but should be fully "transparent", i.e. it should be able to receive the same child elements as its parent node.

To achieve this, you can set the `allowedGroups` option to the `"inherit"` string:

```js
groups: '*',
allowedGroups: 'inherit'
```