обёртка одного поля; orientation: vertical, horizontal, responsive
FieldLabel
подпись; принимает htmlFor
FieldDescription
подсказка под полем
FieldError
сообщение об ошибке; принимает массив errors
FieldGroup
группа полей с общими отступами
FieldSet + FieldLegend
смысловая группа (<fieldset> и заголовок)
FieldSeparator
разделитель между блоками формы
FieldContent, FieldTitle
для полей-карточек: заголовок и описание рядом с переключателем
Элементы ввода
Компонент
Ключевые состояния
Input
disabled, aria-invalid, placeholder
Textarea
то же плюс rows
Select
data-open, выбранный пункт, клавиатурная навигация
Checkbox
data-checked, data-disabled
Switch
data-checked, data-unchecked, размер sm
Label
peer-disabled:opacity-50
Обратите внимание на имена состояний: примитивы Base UI
используют data-checked, а не data-[state=checked]
как в старых версиях на Radix.
Атрибуты доступности
Атрибут
Зачем
htmlFor / id
связь подписи и поля
aria-invalid
поле заполнено неверно: оформление и объявление
aria-describedby
связь с подсказкой и ошибкой
role="alert"
сообщение объявляется сразу
required
обязательное поле
autoComplete
подстановка из браузера: email, current-password, new-password
inputMode
клавиатура на мобильных: numeric, email, tel
Схема zod: частые правила
Правило
Запись
Обязательная строка
z.string().min(1, "Заполните поле")
Почта
z.email("Некорректный адрес")
Длина пароля
z.string().min(8, "Минимум 8 символов")
Число в диапазоне
z.number().min(1).max(100)
Список значений
z.enum(["start", "team"])
Обязательная галочка
z.literal(true, { message: "Примите условия" })
Сравнение полей
.refine(fn, { path: ["confirm"] })
Необязательное поле
z.string().optional()
⚠️ Проверить по документации: API zod
менялся между мажорными версиями (например, z.string().email()
и z.email()). Сверьтесь с версией в своём
package.json.
react-hook-form: что используется чаще всего
Что
Зачем
useForm({ resolver })
создать форму с валидацией по схеме
register("field")
подключить неуправляемое поле
handleSubmit(onValid)
валидировать и отправить
formState.errors
ошибки по полям
formState.isSubmitting
блокировка кнопки
Controller
подключить компонент, который управляется состоянием (Select, Checkbox)