Элементы меню: Item, CheckboxItem, RadioGroup

Radix UI предоставляет набор полностью управляемых компонентов для создания меню с высокой доступностью и гибкой кастомизацией. Основные строительные блоки меню включают Item, CheckboxItem и RadioGroup, каждый из которых выполняет конкретную функцию в пользовательском интерфейсе. Рассмотрим их детально.

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

Ключевые свойства и особенности:

  • disabled — делает элемент неактивным.
  • onSelect — обработчик выбора элемента.
  • asChild — позволяет использовать сторонние компоненты вместо стандартного HTML-элемента.
  • Автоматическое управление фокусом и подсветкой при наведении или с помощью клавиатуры.

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

<Menu.Root>
  <Menu.Trigger>Открыть меню</Menu.Trigger>
  <Menu.Content>
    <Menu.Item onSel ect={() => console.log('Сохранить')}>Сохранить</Menu.Item>
    <Menu.Item onSel ect={() => console.log('Удалить')} disabled>Удалить</Menu.Item>
  </Menu.Content>
</Menu.Root>

В данном примере первый элемент активен и реагирует на выбор, второй — неактивен. Radix UI обеспечивает корректное управление фокусом и поддерживает доступность по стандарту WAI-ARIA.

Menu.CheckboxItem расширяет функциональность Menu.Item и используется для элементов меню, которые могут быть отмечены или сняты. Поддерживается как отдельное состояние, так и управление через внешний state.

Ключевые особенности:

  • checked — указывает текущее состояние (true/false).
  • onCheckedChange — коллбек, вызываемый при изменении состояния.
  • Встроенная поддержка отображения чекбокса.
  • Полная доступность: управление через клавиши Space и Enter.

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

const [darkMode, setDarkMode] = React.useState(false);

<Menu.Root>
  <Menu.Trigger>Настройки</Menu.Trigger>
  <Menu.Content>
    <Menu.CheckboxItem
      checked={darkMode}
      onCheckedCha nge={(checked) => setDarkMode(checked)}
    >
      Тёмная тема
    </Menu.CheckboxItem>
  </Menu.Content>
</Menu.Root>

В этом примере элемент CheckboxItem связывается с состоянием React. Пользователь может включать и выключать флажок с помощью мыши или клавиатуры, а состояние синхронизируется с приложением.

Menu.RadioGroup используется для организации группы взаимно исключающих элементов меню. Каждый элемент внутри группы представлен через Menu.RadioItem, который может быть выбран только один раз.

Основные свойства:

  • value — текущее выбранное значение группы.
  • onValueChange — обработчик изменения выбранного элемента.
  • Menu.RadioItem принимает value для идентификации выбранного пункта.
  • Встроенная поддержка визуального индикатора выбранного элемента.
  • Клавиатурная навигация: стрелки вверх/вниз для перемещения между элементами, Enter/Space для выбора.

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

const [viewMode, setViewMode] = React.useState('list');

<Menu.Root>
  <Menu.Trigger>Вид отображения</Menu.Trigger>
  <Menu.Content>
    <Menu.RadioGroup value={viewMode} onValueCha nge={setViewMode}>
      <Menu.RadioItem value="list">Список</Menu.RadioItem>
      <Menu.RadioItem value="grid">Сетка</Menu.RadioItem>
      <Menu.RadioItem value="compact">Компактный</Menu.RadioItem>
    </Menu.RadioGroup>
  </Menu.Content>
</Menu.Root>

Здесь RadioGroup управляет состоянием выбранного режима отображения. Пользователь может переключаться между вариантами, а состояние сохраняется в React.

Сравнение Item, CheckboxItem и RadioGroup

Элемент Тип поведения Управление состоянием Клавиатурная доступность
Menu.Item Одноразовое действие Через onSelect Arrow, Enter, Space
Menu.CheckboxItem Флаг (вкл/выкл) Через checked и onCheckedChange Arrow, Space, Enter
Menu.RadioGroup Взаимно исключающие элементы Через value и onValueChange Arrow, Space, Enter

Практические советы

  • Использовать asChild, чтобы интегрировать стилизованные компоненты из styled-components или Tailwind.
  • Для сложных меню комбинировать Item, CheckboxItem и RadioGroup, создавая иерархические и интерактивные панели.
  • Обеспечивать уникальные значения для элементов в RadioGroup, чтобы избежать конфликтов состояния.
  • Проверять доступность через экранные читалки — Radix UI автоматически добавляет нужные ARIA-атрибуты.

Эти элементы позволяют строить гибкие, доступные и полностью управляемые меню, которые легко интегрируются с React-состоянием и сторонними стилями. В комбинации они создают мощный инструмент для создания современных пользовательских интерфейсов.

Оглавление