Режимы single и multiple

Radix UI предоставляет высокоуровневые, доступные и настраиваемые компоненты интерфейса для React, среди которых особое внимание заслуживают контролируемые элементы выбора: RadioGroup, CheckboxGroup, Accordion и другие компоненты, поддерживающие режимы single и multiple. Эти режимы определяют логику взаимодействия пользователя с набором элементов.

Режим single

Режим single подразумевает, что из группы элементов можно выбрать только один элемент. Этот режим широко используется в ситуациях, когда необходимо строгое ограничение выбора, например, радио-кнопки или аккордеон с одиночным раскрытием.

Пример с RadioGroup

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

function PaymentMethod() {
  return (
    <RadioGroup.Root defaultValue="credit" aria-label="Payment method">
      <RadioGroup.Item value="credit">Кредитная карта</RadioGroup.Item>
      <RadioGroup.Item value="paypal">PayPal</RadioGroup.Item>
      <RadioGroup.Item value="bank">Банковский перевод</RadioGroup.Item>
    </RadioGroup.Root>
  );
}

Особенности:

  • Атрибут value указывает на выбранный элемент.
  • Только один RadioGroup.Item может быть активным одновременно.
  • Управление выбором может быть как контролируемым, так и неконтролируемым через defaultValue.

Пример с Accordion

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Root type="single" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Header>Секция 1</Accordion.Header>
    <Accordion.Content>Контент секции 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Header>Секция 2</Accordion.Header>
    <Accordion.Content>Контент секции 2</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
  • Атрибут type="single" гарантирует, что одновременно открыта будет только одна секция.
  • Для закрытия всех элементов можно использовать collapsible={true}.

Режим multiple

Режим multiple позволяет выбирать несколько элементов одновременно. Такой подход применяется в CheckboxGroup, многократном выборе аккордеона и других списках с возможностью множественного выбора.

Пример с CheckboxGroup

import * as Checkbox from '@radix-ui/react-checkbox';

function ToppingsSelector() {
  return (
    <div role="group" aria-label="Toppings">
      <Checkbox.Root value="cheese">Сыр</Checkbox.Root>
      <Checkbox.Root value="tomato">Помидор</Checkbox.Root>
      <Checkbox.Root value="bacon">Бекон</Checkbox.Root>
    </div>
  );
}
  • Каждый элемент может быть выбран независимо от других.
  • Для контроля состояния можно использовать checked и onCheckedChange.

Пример с Accordion в режиме multiple

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Root type="multiple" defaultValue={['item-1']}>
  <Accordion.Item value="item-1">
    <Accordion.Header>Секция 1</Accordion.Header>
    <Accordion.Content>Контент секции 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Header>Секция 2</Accordion.Header>
    <Accordion.Content>Контент секции 2</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
  • Можно открывать сразу несколько секций.
  • Управление выбором осуществляется через массив value.

Контролируемый и неконтролируемый режимы выбора

Radix UI позволяет управлять выбором как внутри компонента, так и извне.

Неконтролируемый пример

Используется defaultValue или defaultChecked:

<RadioGroup.Root defaultValue="paypal">
  ...
</RadioGroup.Root>

Контролируемый пример

Состояние выбирается через React-хук useState:

const [selected, setSelected] = useState('credit');

<RadioGroup.Root value={selected} onValueCha nge={setSelected}>
  ...
</RadioGroup.Root>
  • Позволяет синхронизировать состояние с другими компонентами.
  • Обеспечивает гибкую логику в сложных интерфейсах.

Принципы проектирования с single и multiple

  • Однозначность: режим single облегчает пользователю выбор и предотвращает ошибочные комбинации.
  • Гибкость: режим multiple подходит для настройки параметров, фильтров и опций с множественным выбором.
  • Доступность: Radix UI автоматически поддерживает ARIA-атрибуты, что делает компоненты доступными для вспомогательных технологий.
  • Расширяемость: возможность комбинировать оба режима в одной форме через разные компоненты (например, один Accordion с single, другой с multiple).

Практические рекомендации

  • Для простого выбора одной опции использовать type="single" с collapsible={false} в Accordion.
  • Для множественного выбора использовать type="multiple" и массив значений.
  • Для контролируемого состояния хранить выбранные значения в состоянии React и передавать их через value/checked.
  • Использовать ARIA-атрибуты, которые Radix UI поддерживает автоматически, чтобы улучшить доступность и поддержку клавиатурной навигации.
  • При комбинировании нескольких групп всегда отслеживать уникальность значений value, чтобы избежать конфликтов при управлении состоянием.

Выводы по применению режимов

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