Сепараторы и Labels

Сепараторы

Сепараторы (Separator) в Radix UI — это визуальные элементы, используемые для разделения контента в интерфейсе. Они позволяют структурировать интерфейс, делая его более читаемым и логически разделённым.

Импорт и базовое использование:

import * as Separator from '@radix-ui/react-separator';

<Separator.Root orientation="horizontal" />
  • orientation — определяет направление линии: "horizontal" (по умолчанию) или "vertical".
  • Сепаратор не имеет внутреннего содержимого, его задача — исключительно визуальное разделение элементов.

Стилизация:

Radix UI предоставляет минимальный базовый стиль, позволяющий полностью управлять внешним видом через CSS или CSS-in-JS:

.separator {
  background-color: #e0e0e0;
  height: 1px; /* для горизонтального сепаратора */
  width: 100%;
}
.separator-vertical {
  width: 1px;
  height: 100%;
}

Гибкость:

  • Вертикальные и горизонтальные линии. С помощью orientation легко менять направление.
  • Адаптация к макету. Сепараторы хорошо интегрируются в flex- и grid-контейнеры, автоматически подстраиваясь под размеры родителя.
  • Аксессибельность. Сепараторы не являются интерактивными элементами, но Radix обеспечивает семантическую корректность через role="separator" и aria-orientation.

Пример комбинирования с кнопками:

<div style={{ display: 'flex', alignItems: 'center' }}>
  <button>Кнопка 1</button>
  <Separator.Root orientation="vertical" className="separator-vertical" />
  <button>Кнопка 2</button>
</div>

В этом примере вертикальный сепаратор создаёт чёткое визуальное разграничение между кнопками, не нарушая поток документа.

Labels

Labels (Label) в Radix UI предназначены для связывания текстовых описаний с интерактивными элементами формы, такими как input, textarea или select. Они повышают удобство использования и обеспечивают доступность.

Импорт и базовое использование:

import * as Label from '@radix-ui/react-label';

<Label.Root htmlFor="username">Имя пользователя</Label.Root>
<input id="username" type="text" />
  • htmlFor связывает Label с конкретным элементом формы через id.
  • Radix автоматически передаёт фокус на связанный элемент при клике на текст Label.

Стилизация:

.label {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  display: inline-block;
}

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

  • Совместимость с Radix UI компонентами. Label можно использовать вместе с компонентами вроде Checkbox, Switch или RadioGroup для правильного управления состоянием фокуса и клика.
  • Поддержка состояния фокуса. При фокусе на связанном элементе Label может изменять стиль, что улучшает визуальное восприятие.
  • Гибкость стилизации. Label не накладывает ограничений на CSS и может быть полностью кастомизирован через классы, стилизованные компоненты или CSS-in-JS.

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

import * as Switch from '@radix-ui/react-switch';

<Label.Root htmlFor="notifications">Включить уведомления</Label.Root>
<Switch.Root id="notifications">
  <Switch.Thumb />
</Switch.Root>

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

Интеграция сепараторов и Label

Часто оба компонента используются вместе для создания аккуратных форм или панелей настроек:

<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
  <Label.Root htmlFor="email">Электронная почта</Label.Root>
  <input id="email" type="email" />
  <Separator.Root orientation="horizontal" className="separator" />
  <Label.Root htmlFor="password">Пароль</Label.Root>
  <input id="password" type="password" />
</div>
  • Горизонтальные сепараторы создают визуальное разделение между блоками формы.
  • Labels обеспечивают доступность и корректное управление фокусом.

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

Оглавление