Обзор типов полей
Все 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.Autocomplete | Текстовое поле с подсказками | Город, тег |
Form.Field.Listbox | Всегда видимый список выбора | Фильтры |
Form.Field.RadioGroup | Группа радиокнопок | Пол, тариф |
Form.Field.RadioCard | Карточки-радиокнопки | Тарифный план |
Form.Field.SegmentedGroup | Сегментированный контрол | Режим отображения |
Form.Field.Tags | Теги с автодополнением | Метки, навыки |
Form.Field.NativeSelect | Нативный HTML select | Простые списки |
Form.Field.CascadingSelect | Каскадные зависимые списки | Страна → город |
Логические поля
| Компонент | Описание | Пример |
|---|---|---|
Form.Field.Checkbox | Стандартный чекбокс | Условия, настройки |
Form.Field.Switch | Переключатель | Вкл/выкл |
Form.Field.CheckboxCard | Чекбокс-карточка | Множественный выбор |
Дата и время
| Компонент | Описание | Пример |
|---|---|---|
Form.Field.Date | Выбор даты | День рождения |
Form.Field.DateRange | Диапазон дат | Период бронирования |
Form.Field.DateTimePicker | Совмещённая дата + время | Планирование события |
Form.Field.Time | Выбор времени | Время приёма |
Form.Field.Duration | Длительность (часы/минуты) | Длительность задачи |
Form.Field.Schedule | Недельная сетка расписания | Рабочие часы |
Специальные поля
| Компонент | Описание | Пример |
|---|---|---|
Form.Field.Phone | Телефон с маской | Контактная форма |
Form.Field.Address | Автодополнение адреса | Доставка, оплата |
Form.Field.City | Выбор города | Местоположение |
Form.Field.FileUpload | Загрузка файлов с превью | Аватар, документы |
Form.Field.PinInput | Ввод PIN-кода | Верификация |
Form.Field.OTPInput | Ввод одноразового пароля | Двухфакторка |
Form.Field.ColorPicker | Выбор цвета | Брендинг |
Базовое использование
Все поля работают одинаково:
<Form schema={Schema} initialValue={data} onSubmit={save}>
<Form.Field.String name="fieldName" />
</Form>Тип поля, лейбл, плейсхолдер и валидация берутся из Zod-схемы.
Нужно указать только name, совпадающий с ключом в схеме.
Пользовательские пропсы
Значения из схемы можно переопределить пропами:
<Form.Field.String
name="title"
label="Свой лейбл"
placeholder="Свой плейсхолдер..."
helperText="Дополнительная подсказка"
required
/>