Группы переключателей

Radix UI предоставляет компонент ToggleGroup, который позволяет объединять несколько переключателей (Toggle) в логическую группу, обеспечивая синхронизацию состояния и управление взаимодействием между элементами. Основная цель групп переключателей — управление взаимозависимыми опциями с единым контролем состояния.

Структура ToggleGroup

Компонент состоит из двух ключевых элементов:

  1. ToggleGroup.Root – контейнер для всех переключателей в группе. Именно здесь определяется тип взаимодействия и общие свойства.
  2. ToggleGroup.Item – отдельный переключатель внутри группы. Каждый элемент может иметь собственные атрибуты состояния, но управляется через корневой контейнер.

Пример базовой структуры:

import * as ToggleGroup from '@radix-ui/react-toggle-group';

<ToggleGroup.Root type="single" value={selected} onValueCha nge={setSelected}>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

Ключевые моменты:

  • type="single" задает режим одиночного выбора (аналог радио-кнопок).
  • value и onValueChange управляют состоянием выбранного элемента.
  • ToggleGroup.Item имеет обязательный атрибут value, который идентифицирует элемент.

Типы взаимодействия

Radix UI поддерживает два режима работы группы переключателей:

  1. Одиночный выбор (type="single")

    • Позволяет выбрать только один элемент одновременно.
    • Имеет возможность разрешить отсутствие выбранного элемента через атрибут allowEmpty.

    Пример:

    <ToggleGroup.Root type="single" value={fontStyle} onValueCha nge={setFontStyle} allowEmpty>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

    В этом режиме пользователь может снять выбор с активного элемента, если allowEmpty установлен в true.

  2. Множественный выбор (type="multiple")

    • Позволяет выбрать сразу несколько элементов.
    • value становится массивом, а onValueChange возвращает обновленный массив выбранных элементов.

    Пример:

    <ToggleGroup.Root type="multiple" value={formats} onValueCha nge={setFormats}>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

    В этом режиме элементы можно комбинировать по желанию.

Управление состоянием

Radix UI предоставляет полное управление через контролируемые компоненты, что позволяет интегрировать ToggleGroup с React state, Redux или другими системами управления состоянием.

Пример с React state:

const [selectedFormat, setSelectedFormat] = React.useState('bold');

<ToggleGroup.Root type="single" value={selectedFormat} onValueCha nge={setSelectedFormat}>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

Для множественного выбора:

const [selectedFormats, setSelectedFormats] = React.useState(['bold', 'italic']);

<ToggleGroup.Root type="multiple" value={selectedFormats} onValueCha nge={setSelectedFormats}>
  <ToggleGroup.Item value="bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline">U</ToggleGroup.Item>
</ToggleGroup.Root>

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

Стилизация элементов

Radix UI предоставляет стилизацию через стандартные CSS-классы или CSS-in-JS. Элементы переключателей могут менять внешний вид в зависимости от состояния pressed:

<ToggleGroup.Item
  value="bold"
  className={`toggle-item ${isSelected ? 'selected' : ''}`}
>
  B
</ToggleGroup.Item>

Ключевые псевдоклассы:

  • [data-state="on"] – активное состояние элемента.
  • [data-state="off"] – неактивное состояние элемента.

Пример с Tailwind CSS:

<ToggleGroup.Item
  value="italic"
  className="px-3 py-1 rounded bg-gray-200 data-[state=on]:bg-blue-500 data-[state=on]:text-white"
>
  I
</ToggleGroup.Item>

Доступность

Radix UI обеспечивает автоматическую поддержку ARIA-атрибутов и навигации с клавиатуры:

  • Single: стрелки влево/вправо переключают активный элемент, пробел/Enter выбирают его.
  • Multiple: каждый элемент может быть выбран или снят независимо, управление клавиатурой поддерживается стандартными клавишами.

Эти особенности делают ToggleGroup полностью доступным для пользователей с ограниченными возможностями, что важно для корпоративных и публичных приложений.

Взаимодействие с другими компонентами

Группы переключателей легко интегрируются с другими компонентами Radix UI:

  • Использование с Tooltip для отображения подсказок о функции каждого переключателя.
  • Интеграция с Popover или Dialog для выбора настроек из всплывающего меню.
  • Синхронизация с Form и внешними state-менеджерами для динамических форм.

Пример интеграции с Tooltip:

<ToggleGroup.Item value="bold">
  <Tooltip content="Жирный текст">B</Tooltip>
</ToggleGroup.Item>

Группы переключателей в Radix UI позволяют создавать интуитивные, доступные и легко управляемые интерфейсы для выбора параметров, обеспечивая гибкость между одиночным и множественным выбором, поддержку кастомной стилизации и полную интеграцию с React state.

Оглавление