Доступность форм

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

Контролируемые и неконтролируемые компоненты

В Radix UI компоненты могут быть как контролируемыми, так и неконтролируемыми:

  • Контролируемые компоненты управляются состоянием React через пропсы value и onChange.
  • Неконтролируемые компоненты используют внутреннее состояние компонента, предоставляя колбэк onValueChange для отслеживания изменений.

Такой подход обеспечивает гибкость при интеграции с формовыми библиотеками, например react-hook-form, позволяя легко подключать валидацию и отслеживание состояния формы.

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

Radix UI рекомендует использовать семантическое разделение:

  • FormField отвечает за обертку отдельного элемента формы и управление меткой, ошибкой и состоянием.
  • FormControl инкапсулирует сам элемент управления (input, select, textarea), предоставляя правильные атрибуты ARIA.

Пример структуры:


  Email

Здесь:

  • FormLabel связывается с FormControl через id.
  • FormMessage автоматически отображает сообщения об ошибках или подсказки.

Атрибуты ARIA и семантика

Radix UI заботится о корректной работе ARIA-атрибутов. Основные принципы:

  • aria-invalid используется для указания поля с ошибкой.
  • aria-describedby связывает поле с сообщением об ошибке или подсказкой.
  • role="alert" на элементах сообщений уведомляет экранные читалки о динамических изменениях состояния.

Пример динамической ошибки:


  Имя пользователя
  
    
  
  
    Имя пользователя обязательно

Фокусировка и навигация с клавиатуры

Все компоненты Radix UI обеспечивают корректную навигацию с клавиатуры:

  • Табуляция перемещает фокус по интерактивным элементам формы.
  • Стрелки и пробел могут использоваться для переключения состояний в кастомных элементах (например, радио-кнопках и чекбоксах).
  • Компоненты автоматически управляют визуальным состоянием фокуса через data-state и data-disabled.

Валидация и сообщения об ошибках

Radix UI интегрируется с любыми библиотеками валидации. Структура компонента позволяет динамически отображать сообщения об ошибках:


  Пароль
  
    
  
  Поле обязательно
  Пароль слишком короткий

Ключевой момент: FormMessage может фильтровать сообщения по типу ошибки, автоматически связываясь с соответствующим полем через aria-describedby.

Кастомизация визуального отображения

Radix UI предоставляет возможность полной кастомизации внешнего вида формы, сохраняя доступность:

  • Компоненты используют asChild для передачи стилизованного элемента без потери семантики.
  • Атрибуты состояния (data-state, data-disabled) позволяют создавать адаптивные стили через CSS или CSS-in-JS.

Пример кастомного чекбокса:

Checkbox.Root управляет ARIA-атрибутами и фокусом, а кастомная иконка отображает состояние без нарушения доступности.

Поддержка мобильных устройств и сенсорных экранов

Все элементы Radix UI реагируют на события касания и поддерживают адаптивные размеры:

  • Обеспечивают корректный размер интерактивной области для сенсорных экранов.
  • Управляют фокусом при динамическом отображении элементов.

Интеграция с формовыми библиотеками

Radix UI не ограничивается собственным состоянием. Компоненты легко интегрируются с:

  • react-hook-form
  • Formik
  • Zod или Yup для схемной валидации

Пример с react-hook-form:

const { register, handleSubmit, formState } = useForm();


  Email
  
    
  
  {formState.errors.email && (
    {formState.errors.email.message}
  )}

Комбинация Radix UI и внешней библиотеки позволяет сохранять доступность и при этом внедрять сложную бизнес-логику валидации.

Оглавление