Group и Label

Group и Label являются базовыми строительными блоками в библиотеке Radix UI, предназначенными для организации интерфейсных элементов и обеспечения доступности компонентов. Их правильное использование повышает читаемость интерфейса и улучшает взаимодействие для пользователей с особыми потребностями.

Group

Group служит контейнером для объединения нескольких взаимосвязанных элементов управления, таких как радио-кнопки, чекбоксы или переключатели. Главная цель — семантически связать элементы и упростить навигацию для технологий доступности.

Основные особенности
  • Семантическая группировка: элементы внутри Group логически объединены, что позволяет скринридерам правильно озвучивать их как единую группу.
  • Управление состояниями: при использовании с компонентами состояния, например RadioGroup, Group упрощает обработку выбранного значения.
  • Flex-контейнер: визуально элементы можно выстраивать горизонтально или вертикально с помощью CSS, не нарушая семантики.
Пример использования
import * as RadioGroup from '@radix-ui/react-radio-group';

<RadioGroup.Root defaultValue="option1" aria-label="Выберите вариант">
  <RadioGroup.Item value="option1" id="r1">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
  <RadioGroup.Item value="option2" id="r2">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
</RadioGroup.Root>

Пояснения:

  • Root — корневой контейнер группы, в который помещаются все элементы.
  • Item — отдельный элемент управления внутри группы.
  • Indicator визуально показывает выбранный элемент.
  • Атрибут aria-label обеспечивает доступность для скринридеров.
Рекомендации по применению
  1. Всегда использовать семантические атрибуты (aria-label, aria-labelledby) для описания группы.
  2. Не смешивать несвязанные элементы внутри одного Group.
  3. Поддерживать консистентное визуальное оформление всех элементов.

Label

Label обеспечивает текстовую подпись для интерактивного элемента. В Radix UI этот компонент интегрируется с другими контролами, чтобы улучшить доступность и UX.

Основные особенности
  • Связь с элементом управления: при использовании с htmlFor или внутренними связями Radix UI, клик по Label активирует соответствующий контрол.
  • Доступность: скринридеры автоматически связывают текст Label с элементом формы, что повышает читаемость интерфейса.
  • Стилизация: компонент можно гибко оформлять через CSS, сохраняя при этом семантику.
Пример использования
import * as Label from '@radix-ui/react-label';
import * as Switch from '@radix-ui/react-switch';

<Label.Root htmlFor="airplane-mode">Режим самолета</Label.Root>
<Switch.Root id="airplane-mode">
  <Switch.Thumb />
</Switch.Root>

Пояснения:

  • Root — корневой элемент компонента Label.
  • Атрибут htmlFor связывает подпись с идентификатором контрола.
  • Взаимодействие через клавиатуру или мышь теперь правильно фокусируется на элементе Switch.
Рекомендации по применению
  1. Использовать Label для всех интерактивных элементов, чтобы обеспечить доступность.
  2. При необходимости размещать дополнительный текст для пояснений прямо внутри Label.
  3. Совмещать с Radix компонентами, такими как Checkbox, Switch или RadioGroup, для корректной работы индикаторов и состояния.

Взаимодействие Group и Label

Объединение Group и Label позволяет создавать доступные, структурированные интерфейсы. Чаще всего Label используется для описания всей группы элементов, а отдельные подписи могут присутствовать у каждого элемента внутри.

Пример комплексного использования
import * as RadioGroup from '@radix-ui/react-radio-group';
import * as Label from '@radix-ui/react-label';

<Label.Root>Выберите цвет:</Label.Root>
<RadioGroup.Root defaultValue="red" aria-label="Цвета">
  <RadioGroup.Item value="red" id="red">
    <RadioGroup.Indicator />
    <Label.Root htmlFor="red">Красный</Label.Root>
  </RadioGroup.Item>
  <RadioGroup.Item value="green" id="green">
    <RadioGroup.Indicator />
    <Label.Root htmlFor="green">Зелёный</Label.Root>
  </RadioGroup.Item>
</RadioGroup.Root>

Пояснения:

  • Основная подпись для группы создаёт контекст (Выберите цвет:).
  • Каждый элемент внутри группы имеет собственный Label, связывающий визуальное описание с контролом.
  • Скринридеры озвучивают группу и элементы корректно, а взаимодействие с клавиатуры становится естественным.

Использование Group и Label в связке обеспечивает:

  • Семантическую структуризацию интерфейса.
  • Корректное восприятие элементов технологиями доступности.
  • Лёгкость стилизации и управления состояниями.

Эти компоненты создают фундамент для построения сложных UI-элементов с минимальными усилиями и максимальной корректностью с точки зрения доступности.

Оглавление