Урок 20. Формы shadcn/ui

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~55 мин 🎯 Сложность: Продвинутая

⚡ Кратко

Форма собирается из полей (Input, Select, Checkbox, Switch, Textarea) и обвязки Field: подпись, описание, сообщение об ошибке. Ошибка помечается атрибутом aria-invalid — он и оформляет поле, и сообщает о проблеме вспомогательным технологиям. Валидацию удобно описывать схемой zod и подключать через react-hook-form.

О чём этот урок

Формы — место, где чаще всего страдает доступность: подписи не связаны с полями, ошибки видны только цветом, кнопка отправки не блокируется. Разберём, как компоненты реестра решают это по умолчанию, соберём форму регистрации и подключим валидацию по схеме.

Структура урока

Теория

Field, состояния, доступность, валидация.

Справочник

Компоненты формы и их части.

Примеры

Вход, регистрация, настройки, выбор тарифа.

Старый vs Новый

Компонент Form на RHF против Field.

Задания

Собрать форму с валидацией.

Решения

Готовый код с разбором.

Ошибки

Подписи, ошибки цветом, потерянный фокус.

Домашнее задание

Форма профиля с валидацией.

Ресурсы

Документация по формам и zod.

Практика

  • Соберите поле с подписью, подсказкой и сообщением об ошибке.
  • Проверьте форму только клавиатурой — от первого поля до кнопки.
  • Опишите схему валидации на zod и выведите типы из неё.

Навигация