Обзор типов полей
Все 40+ компонентов полей в @letar/forms
| Компонент | Описание | Пример |
|---|
Form.Field.String | Однострочный текст | Имя, email, URL |
Form.Field.Textarea | Многострочный текст | Описание, комментарии |
Form.Field.Password | Пароль с переключением видимости | Форма входа |
Form.Field.MaskedInput | Ввод с маской формата | Телефон, кредитная карта |
Form.Field.Editable | Редактируемый текст | Клик для редактирования |
Form.Field.RichText | Визуальный редактор | Статьи, посты |
| Компонент | Описание | Пример |
|---|
Form.Field.Number | Числовой ввод со степпером | Количество, возраст |
Form.Field.Slider | Ползунок | Громкость, рейтинг |
Form.Field.Currency | Денежный ввод с символом валюты | Цена, зарплата |
Form.Field.Percentage | Процентный ввод (0-100%) | Скидка, прогресс |
Form.Field.Rating | Звёздочный рейтинг | Отзывы, оценки |
| Компонент | Описание | Пример |
|---|
Form.Field.Select | Выпадающий список | Категория, статус |
Form.Field.Combobox | Поиск с автодополнением | Поиск пользователя |
Form.Field.RadioGroup | Группа радиокнопок | Пол, тариф |
Form.Field.Checkbox | Чекбокс | Условия, настройки |
Form.Field.Switch | Переключатель | Вкл/выкл |
Form.Field.Tags | Теги с автодополнением | Метки, навыки |
| Компонент | Описание | Пример |
|---|
Form.Field.Date | Выбор даты | День рождения |
Form.Field.DateRange | Диапазон дат | Период бронирования |
Form.Field.Time | Выбор времени | Время приёма |
| Компонент | Описание | Пример |
|---|
Form.Field.Phone | Телефон с маской | Контактная форма |
Form.Field.FileUpload | Загрузка файлов с превью | Аватар, документы |
Form.Field.PinInput | Ввод PIN-кода | Верификация |
Form.Field.ColorPicker | Выбор цвета | Брендинг |
Все поля работают одинаково:
<Form schema={Schema} initialValue={data} onSubmit={save}>
<Form.Field.String name="fieldName" />
</Form>
Тип поля, лейбл, плейсхолдер и валидация берутся из Zod-схемы.
Нужно указать только name, совпадающий с ключом в схеме.