Control и Label

Radix UI предоставляет гибкие и доступные компоненты для создания интерактивных элементов интерфейса. Среди них ключевое место занимают компоненты Control и Label, обеспечивающие корректное взаимодействие с формами и элементами управления.

Control

Компонент Control используется для управления состоянием интерактивных элементов, таких как чекбоксы, радио-кнопки и переключатели. Он не является визуальным элементом сам по себе, а предоставляет логическую оболочку, связывающую состояние элемента с его визуальным представлением.

Основные свойства Control:
  • checked / defaultChecked – определяет текущее состояние элемента (активен/неактивен). checked используется для контролируемых компонентов, defaultChecked – для неконтролируемых.
  • disabled – делает элемент неактивным, предотвращая любые взаимодействия пользователя.
  • onCheckedChange – коллбэк, срабатывающий при изменении состояния. Он получает значение true или false (для чекбоксов) или выбранный вариант (для радио).
Пример использования:
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <Checkbox.Root defaultChecked>
      <Checkbox.Indicator>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Root>
  );
}

Пояснение:

  • Checkbox.Root — это обертка Control.
  • Checkbox.Indicator отображает состояние элемента, визуализируя его через иконку.
  • Использование Radix UI позволяет отделить логику управления состоянием от визуальной части, обеспечивая высокую доступность (Accessibility) и совместимость с клавиатурой.

Label

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

Основные особенности Label:
  • Автоматическая связь с Control через родительский компонент или атрибут htmlFor.
  • Поддержка клика по тексту для изменения состояния связанного элемента.
  • Возможность стилизовать состояние, когда элемент активен, фокусирован или отключен.
Пример использования:
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';

function LabeledCheckbox() {
  return (
    <div>
      <Checkbox.Root id="accept">
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <Checkbox.Label htmlFor="accept">
        Я согласен с условиями
      </Checkbox.Label>
    </div>
  );
}

Пояснение:

  • id у Control и htmlFor у Label создают прямую связь, что улучшает доступность.
  • Клик по тексту автоматически переключает состояние элемента.

Взаимодействие Control и Label

Radix UI обеспечивает полную синхронизацию между Control и Label. Основные моменты:

  • Фокусировка: при клике на Label фокус автоматически переносится на Control.
  • Состояния: Label может менять стиль в зависимости от состояния Control (:checked, :disabled, :focus).
  • Адаптивность: можно использовать как отдельные элементы, так и комбинированные компоненты для создания форм с множеством элементов управления.
Пример с динамическими стилями:
import * as Checkbox from '@radix-ui/react-checkbox';
import { styled } from '@stitches/react';

const StyledLabel = styled(Checkbox.Label, {
  cursor: 'pointer',
  color: 'gray',
  variants: {
    checked: {
      true: { color: 'green' },
    },
    disabled: {
      true: { color: 'lightgray', cursor: 'not-allowed' },
    },
  },
});

function DynamicCheckbox() {
  return (
    <Checkbox.Root id="subscribe">
      <Checkbox.Indicator>✓</Checkbox.Indicator>
      <StyledLabel htmlFor="subscribe" checked={true}>
        Подписаться на рассылку
      </StyledLabel>
    </Checkbox.Root>
  );
}

Пояснение:

  • Использование variants позволяет легко менять стили в зависимости от состояния Control.
  • Label и Control полностью разделяют логику и визуальное оформление, что упрощает поддержку и тестирование.

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

  • Всегда связывать Label с Control через id/htmlFor или через Radix Root–Label связь.
  • Для чекбоксов и радио рекомендуется использовать Indicator, чтобы визуализировать состояние.
  • Избегать смешивания логики Control с визуальными стилями — Radix UI построен на принципе разделения ответственности.
  • Для сложных форм можно комбинировать Control с Label и дополнительными компонентами, такими как Fieldset и Description, чтобы создавать доступные интерфейсы с минимальными усилиями.

Control и Label в Radix UI формируют фундамент для доступных и управляемых форм. Их правильная комбинация обеспечивает корректное поведение элементов при взаимодействии пользователя и удобную кастомизацию внешнего вида без нарушения логики.

Оглавление