RadioGroup и CheckboxItem

Radix UI предоставляет низкоуровневые компоненты интерфейса с акцентом на доступность и управляемость. Среди ключевых элементов для выбора значений выделяются RadioGroup и CheckboxItem. Эти компоненты позволяют строить управляемые и неуправляемые формы с полной поддержкой клавиатурной навигации и ARIA-атрибутов.

RadioGroup

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

Основная структура

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

<RadioGroup.Root defaultValue="option1" onValueCha nge={handleChange}>
  <RadioGroup.Item value="option1" id="r1">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
  <RadioGroup.Item value="option2" id="r2">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
</RadioGroup.Root>

  • RadioGroup.Root — контейнер группы.

    • defaultValue задаёт начальное выбранное значение.
    • onValueChange вызывается при изменении выбранного элемента.

  • RadioGroup.Item — отдельная радио-кнопка.

    • value определяет уникальное значение кнопки.
    • id необходим для связи с label через <label htmlFor="id">.

  • RadioGroup.Indicator — визуальный индикатор выбранного состояния.

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

  1. Полная доступность: все элементы поддерживают ARIA-атрибуты, управление клавиатурой (стрелками, табом) и корректное взаимодействие с экранными читалками.
  2. Управляемое состояние: value и onValueChange позволяют интегрировать RadioGroup с React state или внешними формами.
  3. Стилизация: Radix UI не навязывает стили, что позволяет полностью кастомизировать внешний вид через CSS или Tailwind.

Пример управления состоянием через React

const [selected, setSelected] = React.useState('option1');

<RadioGroup.Root value={selected} onValueCha nge={setSelected}>
  <RadioGroup.Item value="option1">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
  <RadioGroup.Item value="option2">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
</RadioGroup.Root>

CheckboxItem

CheckboxItem используется внутри CheckboxGroup или самостоятельно для создания элементов с множественным выбором. В отличие от RadioGroup, можно выбрать несколько значений.

Основная структура

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

<Checkbox.Root checked={isChecked} onCheckedCha nge={setChecked}>
  <Checkbox.Indicator />
</Checkbox.Root>

  • Checkbox.Root — контейнер для чекбокса.

    • checked принимает true, false или "indeterminate".
    • onCheckedChange вызывается при изменении состояния.

  • Checkbox.Indicator — визуальный элемент, отображающий галочку или другое состояние.

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

  1. Поддержка состояния indeterminate: полезно для групп, когда часть элементов выбрана.
  2. Полная доступность: ARIA-атрибуты автоматически выставляются.
  3. Гибкость в использовании: может использоваться как одиночный элемент или как часть CheckboxGroup для множественного выбора.

Пример с управлением множественными значениями

const [checkedItems, setCheckedItems] = React.useState(['item1']);

function handleCheckboxChange(value) {
  setCheckedItems(prev =>
    prev.includes(value)
      ? prev.filter(item => item !== value)
      : [...prev, value]
  );
}

<Checkbox.Root
  checked={checkedItems.includes('item1')}
  onCheckedCha nge={() => handleCheckboxChange('item1')}
>
  <Checkbox.Indicator />
</Checkbox.Root>
<Checkbox.Root
  checked={checkedItems.includes('item2')}
  onCheckedCha nge={() => handleCheckboxChange('item2')}
>
  <Checkbox.Indicator />
</Checkbox.Root>

Взаимодействие с формами

Оба компонента интегрируются с формами и могут использоваться в управляемых или неуправляемых сценариях. Для передачи значений в form можно использовать скрытые поля (<input type="hidden" />) или контролировать их через состояние React и обработчики событий.

Использование с label

<label htmlFor="checkbox1">Принять условия</label>
<Checkbox.Root id="checkbox1">
  <Checkbox.Indicator />
</Checkbox.Root>

Это гарантирует корректное поведение при клике на текст и поддерживает доступность.

Стилизация и анимации

Radix UI предоставляет компоненты без встроенных стилей, что делает их идеальными для кастомного дизайна:

  • Индикаторы можно анимировать с помощью @keyframes или CSS transitions.
  • Цвета и размеры элементов задаются через классы или CSS-in-JS.
  • Для управления состояниями hover/focus/active используются псевдоклассы и состояние data-state (data-state="checked"/data-state="unchecked").

Пример стилизации индикатора RadioGroup

[data-state="checked"] {
  background-color: #4f46e5;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

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

Оглавление