---
description: Компонент для визуальной группировки связанных элементов интерфейса.
tags: list
---
# Group [tag:component]
Компонент для визуальной группировки связанных элементов интерфейса.
Обеспечивает единое стилевое оформление, управление отступами и разделителями между блоками контента.
{/* @example-description: Базовая группа `Group` с заголовком, основным контентом и подвалом. */}
```jsx
Заголовок группы} separator="hide">
Контент группы
```
## Вложенные Group
Компонент `Group` можно вкладывать в другой компонент `Group`. Обратите внимание, что чаще всего вложенные
компоненты должны иметь свойство `mode="plain"`, это задаёт им прозрачный фон и скрывает рамки.
{/* @example-description: Вложенные группы `Group` в режиме `plain` для сегментации списка настроек. */}
```jsx
} onClick={() => {}}>
Номер телефона
} onClick={() => {}}>
Email
}
onClick={() => {}}
>
Пароль
} onClick={() => {}}>
Подтверждение входа
} onClick={() => {}}>
Привязанные устройства
```
## Header [tag:component]
import { BlockWrapper } from '@/components/wrappers';
Заголовок группы. Передаётся либо в свойство `header`, либо в начале `children`, либо в `Group.Header`.
{/* @example-description: Отдельный `Header` с индикатором и правым управляющим элементом. */}
```jsx
12} after={}>Уведомления
```
### Рекомендуемые размеры иконок
| Свойство | Расположение | Рекомендуемый размер |
| ---------------- | ----------------------- | -------------------- |
| `before` | Слева от всего контента | `28px` |
| `beforeTitle` | Слева от заголовка | `16px` |
| `afterTitle` | Справа от заголовка | `16px` |
| `beforeSubtitle` | Слева от подзаголовка | `12px` |
| `afterSubtitle` | Справа от подзаголовка | `12px` |
### Дополнительные элементы
- `indicator` — отображает счётчик/статус:
```jsx
12}>Уведомления
```
- `after` — контент справа от всего заголовка:
```jsx
}>Настройки
```
### Пример использования
{/* @example-description: Расширенный пример `Header` с иконками, подзаголовком, счетчиком и ссылкой. */}
```jsx
}
beforeTitle={}
afterTitle={}
beforeSubtitle={}
afterSubtitle={}
subtitle="SOHN — Conrad"
subtitleComponent="h3"
indicator={
3
}
after={Показать все}
>
Плейлисты
}
>
Контент
```
## Footer [tag:component]
Подвал группы. Передаётся в конце `children`.
{/* @example-description: Базовый подвал `Footer` для мета-информации группы. */}
```jsx
```
### Доступность (a11y) [#a11y]
#### Семантическая роль
По умолчанию использует HTML-тег `