Placeholder и индикаторы

Placeholder в Radix UI представляет собой текст-заполнитель, который отображается внутри поля ввода до момента, когда пользователь начнёт ввод. Он отличается от обычного HTML-атрибута placeholder тем, что в Radix UI обеспечивается более гибкая кастомизация и совместимость с анимациями и состояниями компонента.

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

Radix UI предоставляет компонент TextField, который включает в себя отдельный дочерний компонент TextField.Placeholder. Пример базовой структуры:

import * as TextField from '@radix-ui/react-textfield';

function Example() {
  return (
    <TextField.Root>
      <TextField.Input />
      <TextField.Placeholder>Введите имя</TextField.Placeholder>
    </TextField.Root>
  );
}

Ключевые моменты:

  • TextField.Root — контейнер поля ввода.
  • TextField.Input — собственно поле ввода текста.
  • TextField.Placeholder — текст, отображаемый до ввода.
  • Placeholder можно стилизовать через CSS или библиотеку @stitches/react, используя классы или styled-компоненты.

Анимация placeholder

Radix UI позволяет плавно управлять состояниями placeholder через CSS-селекторы состояния :focus или атрибуты состояния:

.textfield-placeholder {
  color: gray;
  transition: transform 0.2s, opacity 0.2s;
}

.textfield-input:focus + .textfield-placeholder,
.textfield-input:not(:placeholder-shown) + .textfield-placeholder {
  transform: translateY(-100%);
  opacity: 0.5;
}

Такой подход позволяет создавать эффект “плавающего” placeholder, который перемещается при вводе текста.

Индикаторы состояния (Indicators)

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

Компонент Indicator в Checkbox

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

function Example() {
  return (
    <Checkbox.Root>
      <Checkbox.Indicator>
        <svg width="16" height="16">
          <path d="M2 8 L6 12 L14 4" stroke="currentColor" strokeWidth="2" fill="none"/>
        </svg>
      </Checkbox.Indicator>
      Checkbox Label
    </Checkbox.Root>
  );
}

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

  • Checkbox.Indicator отображается только когда чекбокс активен.
  • Можно полностью кастомизировать контент индикатора: иконки, анимации, цвета.
  • Индикаторы используют currentColor, что упрощает применение темы.

Использование индикаторов в других компонентах

Radix UI применяет концепцию индикаторов не только в чекбоксах, но и в радиокнопках (RadioGroup), переключателях (Switch) и вкладках (Tabs).

Пример для Switch:

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

function Example() {
  return (
    <Switch.Root className="switch-root">
      <Switch.Thumb className="switch-thumb" />
    </Switch.Root>
  );
}
  • Switch.Thumb играет роль индикатора: его положение и состояние отражают текущее состояние переключателя.
  • Анимации и цветовые изменения легко реализуются через CSS-переменные или Tailwind.

Состояния и доступность

Radix UI строго соблюдает принципы доступности (a11y). Placeholder и индикаторы корректно работают с клавиатурой и экранными считывателями.

Placeholder:

  • Использует стандартные ARIA-атрибуты для описания состояния поля (aria-placeholder), если требуется кастомизация.
  • Совместим с экранными читалками при динамическом обновлении текста.

Индикаторы:

  • Checkbox.Indicator и Radio.Indicator имеют aria-checked и aria-selected для корректного взаимодействия с ассистивными технологиями.
  • Можно добавлять состояния ошибок или предупреждений через aria-invalid и визуальные индикаторы цвета.

Советы по интеграции

  1. Использовать Placeholder только внутри компонентов Input, Textarea или TextField для единообразия.
  2. Для сложной анимации placeholder комбинировать Radix UI с CSS-анимациями или Framer Motion.
  3. Индикаторы лучше делать отдельными визуальными компонентами, чтобы легко изменять их стиль или состояние через props.
  4. Поддерживать контрастность индикаторов для соблюдения WCAG 2.1: текст и иконки должны быть читаемыми на любом фоне.
  5. Сочетать индикаторы с дополнительными подсказками (Tooltip) для информирования о состоянии без лишнего текста.

Продвинутая кастомизация

Radix UI позволяет объединять placeholder и индикаторы в один визуальный блок для сложных форм:

<TextField.Root className="custom-root">
  <TextField.Input className="custom-input" />
  <TextField.Placeholder className="custom-placeholder">Email</TextField.Placeholder>
  <span className="status-indicator success" />
</TextField.Root>
  • Класс status-indicator можно динамически менять в зависимости от валидации.
  • Placeholder может смещаться при наличии индикатора, создавая аккуратный и информативный UI.
  • Полная кастомизация доступна через CSS, без ограничения стандартного поведения Radix UI.

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

Оглавление