Ориентация группы

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

1. Свойство orientation

orientation определяет направление, в котором элементы группы располагаются визуально и логически для навигации с клавиатуры.

Поддерживаемые значения:

  • horizontal — элементы располагаются в строку;
  • vertical — элементы располагаются в колонку.

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

import * as RadioGroup from '@radix-ui/react-radio-group';

<RadioGroup.Root orientation="horizontal" defaultValue="option1">
  <RadioGroup.Item value="option1" id="r1">Option 1</RadioGroup.Item>
  <RadioGroup.Item value="option2" id="r2">Option 2</RadioGroup.Item>
  <RadioGroup.Item value="option3" id="r3">Option 3</RadioGroup.Item>
</RadioGroup.Root>
  • Горизонтальная ориентация оптимальна для меню выбора внутри панели инструментов.
  • Вертикальная ориентация подходит для форм, где элементы располагаются один под другим.

2. Взаимодействие с клавиатурой

Radix UI автоматически обеспечивает логическую навигацию по группе в зависимости от ориентации:

  • Горизонтальная: стрелки ArrowLeft и ArrowRight перемещают фокус между элементами;
  • Вертикальная: стрелки ArrowUp и ArrowDown перемещают фокус между элементами.

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

3. Группы с несколькими состояниями

Для компонентов ToggleGroup можно задавать несколько активных элементов одновременно (type="multiple") или только один (type="single"):

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

<ToggleGroup.Root type="multiple" orientation="vertical">
  <ToggleGroup.Item value="bold" aria-label="Bold">B</ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Italic">I</ToggleGroup.Item>
  <ToggleGroup.Item value="underline" aria-label="Underline">U</ToggleGroup.Item>
</ToggleGroup.Root>
  • При type="multiple" пользователи могут включать несколько опций одновременно.
  • При type="single" Radix обеспечивает эксклюзивный выбор с автоматическим снятием фокуса с предыдущего элемента при выборе нового.

4. Управление фокусом внутри группы

Radix UI применяет roving tabindex, что позволяет поддерживать только один активный элемент с tabindex=0, а остальные элементы получают tabindex=-1. Это предотвращает случайное уход фокуса и делает навигацию логически последовательной.

<RadioGroup.Root orientation="vertical">
  <RadioGroup.Item value="1" id="r1" tabIndex={0}>1</RadioGroup.Item>
  <RadioGroup.Item value="2" id="r2" tabIndex={-1}>2</RadioGroup.Item>
  <RadioGroup.Item value="3" id="r3" tabIndex={-1}>3</RadioGroup.Item>
</RadioGroup.Root>

Roving tabindex обновляется автоматически при использовании стрелок клавиатуры, что минимизирует ручное управление фокусом.

5. Стилизация элементов группы

Radix UI не накладывает предопределённые стили, но предоставляет состояния элементов для применения кастомной стилизации:

  • data-state="checked" — для выбранного элемента;
  • data-state="unchecked" — для невыбранного;
  • data-disabled — для отключённых элементов;
  • data-orientation="horizontal|vertical" — для группы.

CSS можно писать так:

[data-orientation="vertical"] > [data-state="checked"] {
  background-color: #0053ba;
  color: white;
}

[data-orientation="horizontal"] > [data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Эти атрибуты позволяют создать полностью кастомный вид группы без вмешательства в внутреннюю логику Radix.

6. События изменения состояния

Все группы поддерживают событие onValueChange, которое передаёт новое значение выбранного элемента или массив выбранных значений:

<RadioGroup.Root
  orientation="horizontal"
  onValueCha nge={(value) => console.log('Выбрано:', value)}
>
  <RadioGroup.Item value="1">1</RadioGroup.Item>
  <RadioGroup.Item value="2">2</RadioGroup.Item>
</RadioGroup.Root>

Для ToggleGroup с type="multiple" value будет массивом активных элементов.

7. Доступность и aria-атрибуты

Radix автоматически добавляет необходимые ARIA-атрибуты, такие как role="radiogroup", role="radio", aria-checked, и корректно обновляет их при изменении состояния. Это снимает значительную часть работы по обеспечению доступности интерфейса.

8. Комбинирование ориентации и адаптивности

Для современных интерфейсов можно менять ориентацию группы динамически в зависимости от ширины экрана:

const isMobile = window.innerWidth < 768;

<RadioGroup.Root orientation={isMobile ? "vertical" : "horizontal"}>
  <RadioGroup.Item value="a">A</RadioGroup.Item>
  <RadioGroup.Item value="b">B</RadioGroup.Item>
</RadioGroup.Root>

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

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

Оглавление