Group

Компонент для визуальной группировки связанных элементов интерфейса. Обеспечивает единое стилевое оформление, управление отступами и разделителями между блоками контента.

Загружается...

Вложенные Group

Компонент Group можно вкладывать в другой компонент Group. Обратите внимание, что чаще всего вложенные компоненты должны иметь свойство mode="plain", это задаёт им прозрачный фон и скрывает рамки.

Загружается...

Заголовок группы. Передаётся либо в свойство header, либо в начале children, либо в Group.Header.

Загружается...

Свойство	Расположение	Рекомендуемый размер
`before`	Слева от всего контента	`28px`
`beforeTitle`	Слева от заголовка	`16px`
`afterTitle`	Справа от заголовка	`16px`
`beforeSubtitle`	Слева от подзаголовка	`12px`
`afterSubtitle`	Справа от подзаголовка	`12px`

Дополнительные элементы

indicator — отображает счётчик/статус:
```
<Header indicator={<Badge mode="prominent">12</Badge>}>Уведомления</Header>
```
after — контент справа от всего заголовка:
```
<Header after={<Switch />}>Настройки</Header>
```

Пример использования

Загружается...

Подвал группы. Передаётся в конце children.

Загружается...

Семантическая роль

По умолчанию использует HTML-тег <footer>, дополнительно задаётся роль role="contentinfo" (для поддержки Safari<=13 ↗).

Предназначен для:

контактной информации;
ссылок на разделы сайта;
копирайта и юридических данных;
мета-информации о содержимом.

Ключевые правила

Сценарий	Решение	Почему важно
Глобальный подвал страницы	Только один на страницу	Соответствие стандартам `WAI-ARIA`
Несколько подвалов	Добавить `aria-label` каждому	Различение разделов скринридерами
Декоративный элемент	`<Footer Component="div">`	Избежать ложной семантики

Контекст использования

В данном примере первый Footer “локальный”, потому что находится внутри секционного контента (компонент Group) и содержит мета-информацию, а второй Footer - глобальный, потому что относится ко всей странице.

Загружается...

Множество

Несколько подвалов без контекста скринридеры воспринимают как дубли, чтобы этого избежать, добавляйте aria-label каждому компоненту:

<Footer aria-label="Навигация">
  <Link href="#about">О нас</Link>
  <Link href="#contacts">Контакты</Link>
</Footer>
 
<Footer aria-label="Юридическая информация">
  <Text>© 2025 Компания</Text>
</Footer>

Пользовательский тэг

Используйте Component="div" если:

контент не соответствует семантике подвала;
элемент используется для визуального оформления;
уже есть глобальный подвал на странице.

// Декоративный раздел
<Footer Component="div">Информация на данной странице является конфиденциальной.</Footer>

Group.ExpandedContent

Компенсирует внутренние отступы Group.

Загружается...

Подкомпонентный подход

Собрать Group самостоятельно можно с помощью следующих подкомпонентов:

Group.Container – служит оберткой, отвечающей за скругления и отступы внутри группы. Принимает все основные свойства Group, кроме header и description.
Group.Header – отвечает за отрисовку заголовка. Соответствует свойству header у Group. Рекомендуется использовать подкомпонент Header в качестве содержимого.
Group.Description – отвечает за отрисовку подписи в нижней части группы. Соответствует свойству description у Group.

Загружается...

Свойства и методы

Group

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`description`	`ReactNode` Подпись под содержимым. По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`header`	`ReactNode` Элемент заголовка группы. По умолчанию: `-`
`mode`	`"card" \| "plain"` Режим отображения. Если установлен `card`, выглядит как карточка c обводкой и внешними отступами. Если `plain` — без отступов и обводки. По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`) В модальных окнах по умолчанию `plain`. По умолчанию: `-`
`padding`	`"s" \| "m"` Отвечает за отступы вокруг контента в режиме `card`. По умолчанию: `-`
`separator`	`"auto" \| "show" \| "hide"` `show` (только для `mode="plain"`) - разделитель всегда показывается `hide` - разделитель всегда спрятан, `auto` - разделитель рисуется автоматически между соседними группами. По умолчанию: `-`

Group.Container

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`mode`	`"card" \| "plain"` Режим отображения. Если установлен `card`, выглядит как карточка c обводкой и внешними отступами. Если `plain` — без отступов и обводки. По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`) В модальных окнах по умолчанию `plain`. По умолчанию: `-`
`padding`	`"s" \| "m"` Отвечает за отступы вокруг контента в режиме `card`. По умолчанию: `m`
`separator`	`"auto" \| "show" \| "hide"` `show` (только для `mode="plain"`) - разделитель всегда показывается `hide` - разделитель всегда спрятан, `auto` - разделитель рисуется автоматически между соседними группами. По умолчанию: `auto`

Group.Header

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`

Group.Description

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`

Group.ExpandedContent

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`direction`	`"inline" \| "block"` Направление отображения контента. По умолчанию: `inline`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`

Header

Свойство	Описание
`after`	`ReactNode` Допускаются иконки, текст, Link. По умолчанию: `-`
`afterSubtitle`	`ReactNode` Иконка справа от subtitle (рекомендуется использовать размер 12px). По умолчанию: `-`
`afterTitle`	`ReactNode` Иконка справа от title (рекомендуется использовать размер 16px). По умолчанию: `-`
`before`	`ReactNode` Иконка слева (рекомендуется использовать размер 28px). По умолчанию: `-`
`beforeSubtitle`	`ReactNode` Иконка слева от subtitle (рекомендуется использовать размер 12px). По умолчанию: `-`
`beforeTitle`	`ReactNode` Иконка слева от title (рекомендуется использовать размер 16px). По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `h2`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`indicator`	`ReactNode` Допускаются текст, Indicator. По умолчанию: `-`
`multiline`	`boolean` Возможность отображения текста в несколько строк. По умолчанию: `-`
`size`	`"s" \| "m" \| "l" \| "xl"` Размер компонента. По умолчанию: `m`
`subtitle`	`ReactNode` Подпись под основным текстом. По умолчанию: `-`
`subtitleComponent`	`ElementType<any, keyof IntrinsicElements>` Позволяет задать тип элемента в который будет обёрнут subtitle. По умолчанию: `span`

Свойство	Описание
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `footer`

FormLayoutGroup

RadioGroup