Управление выбором

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

RadioGroup

Компонент RadioGroup предназначен для выбора одного значения из множества. Он состоит из контейнера RadioGroup.Root и отдельных элементов RadioGroup.Item.

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


  
    Вариант 1
  
  
    Вариант 2

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

  • defaultValue задаёт начальное выбранное значение.
  • value в RadioGroup.Item связывает элемент с конкретным значением.
  • Использование onValueChange позволяет отслеживать выбор пользователя и синхронизировать состояние с внешними данными.
 console.log(value)}>
  ...

Совет по доступности: каждый RadioGroup должен иметь корректный aria-label или aria-labelledby.

Checkbox

Checkbox используется для множественного выбора. Компонент управляет состоянием checked, которое может быть true, false или "indeterminate".

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


  ✓

Особенности управления состоянием:

  • defaultChecked задаёт начальное состояние.
  • checked и onCheckedChange позволяют полностью контролировать состояние извне.
  • Состояние "indeterminate" полезно для частично выбранных групп элементов.
 setIsChecked(checked)}
>
  ✓

Примечание: компонент Checkbox можно интегрировать с формами и использовать для создания сложных списков с вложенными элементами.

Select

Select предоставляет интерфейс выбора одного значения из списка с выпадающим меню. Основные компоненты: Select.Root, Select.Trigger, Select.Content, Select.Item.

import * as Select fr om '@radix-ui/react-select';


  Выберите фрукт
  
    Яблоко
    Апельсин

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

  • defaultValue и value управляют выбранным элементом.
  • onValueChange позволяет синхронизировать выбор с состоянием React.
  • Select.Trigger отвечает за открытие и закрытие списка, а Select.Content содержит элементы выбора.
  • Select.Item можно стилизовать индивидуально и добавлять иконки или индикаторы выбранного состояния.

Toggle

Toggle — это компонент для переключения состояния включено/выключено. Он управляет булевым состоянием и часто используется в настройках интерфейса.

import * as Toggle fr om '@radix-ui/react-toggle';


  {isToggled ? 'Включено' : 'Выключено'}

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

  • pressed отражает текущее состояние.
  • onPressedChange позволяет управлять состоянием извне.
  • Можно комбинировать с анимацией и стилями для создания интерактивного интерфейса.

Согласованное управление состоянием

Radix UI предоставляет контролируемые и неконтролируемые варианты компонентов:

  • Неконтролируемые: используют defaultValue или defaultChecked, состояние хранится внутри компонента.
  • Контролируемые: через value / checked и функции обратного вызова (onValueChange, onCheckedChange) состояние управляется извне, что позволяет интегрировать компоненты с Redux, Zustand или Context API.
const [selected, setSelected] = useState('option1');


  ...

Преимущество контролируемого подхода: можно объединять несколько компонентов, синхронизировать состояние формы, реализовывать сложные зависимости между элементами выбора.

Стратегии работы с группами выбора

  1. Объединение RadioGroup и Checkbox: для создания гибких форм, где одни поля требуют единственного выбора, а другие — множественного.
  2. Интеграция с формами: через react-hook-form или Formik, где Radix компоненты могут управлять значениями поля через контроллеры.
  3. Динамическое обновление списка элементов: Select.Content и RadioGroup могут рендериться на основе массива данных, поддерживая реактивное изменение интерфейса.
const options = ['Вариант 1', 'Вариант 2', 'Вариант 3'];


  {options.map((option) => (
    
      {option}
    
  ))}

Важные рекомендации

  • Всегда использовать ARIA атрибуты для доступности.
  • Состояние выбора должно быть предсказуемым и синхронизированным с внешними источниками данных.
  • Для комплексных интерфейсов применять контролируемый подход с внешним состоянием.
  • Комбинировать Radix UI компоненты с Tailwind CSS или Styled Components для создания эстетически согласованного интерфейса.
Оглавление