Специализированные поля
Phone, PinInput, ColorPicker, Tags, FileUpload, Address
Phone
API: Form.Field.Phone
Ввод номера телефона с маской формата.
const Schema = z.object({
phone: z.string().meta({
ui: { title: 'Телефон' },
}),
})
<Form.Field.Phone name="phone" />PinInput
API: Form.Field.PinInput
Ввод PIN-кода или OTP.
const Schema = z.object({
code: z.string().meta({
ui: { title: 'Код подтверждения' },
}),
})
<Form.Field.PinInput name="code" />ColorPicker
API: Form.Field.ColorPicker
Выбор цвета.
const Schema = z.object({
color: z.string().meta({
ui: { title: 'Цвет бренда' },
}),
})
<Form.Field.ColorPicker name="color" />Tags
API: Form.Field.Tags
Ввод тегов — множественные текстовые значения.
const Schema = z.object({
skills: z.array(z.string()).meta({
ui: { title: 'Навыки' },
}),
})
<Form.Field.Tags name="skills" />
// С ограничением количества
<Form.Field.Tags name="skills" maxTags={5} />FileUpload
API: Form.Field.FileUpload
Загрузка файлов — кнопка или зона перетаскивания.
const Schema = z.object({
avatar: z.any().optional().meta({
ui: { title: 'Аватар' },
}),
})
<Form.Field.FileUpload name="avatar" accept="image/*" />
// Множественная загрузка
<Form.Field.FileUpload name="documents" maxFiles={5} />Address
API: Form.Field.Address
Адресное поле с автодополнением.
const Schema = z.object({
address: z.string().meta({
ui: { title: 'Адрес' },
}),
})
<Form.Field.Address name="address" />City
API: Form.Field.City
Автодополнение города.
<Form.Field.City name="city" />Duration
API: Form.Field.Duration
Ввод длительности — часы, минуты, секунды.
<Form.Field.Duration name="duration" />Schedule
API: Form.Field.Schedule
Расписание на неделю — выбор рабочих часов для каждого дня.
<Form.Field.Schedule name="workingHours" />OTPInput
API: Form.Field.OTPInput
Ввод одноразового пароля — оптимизирован для SMS/email кодов.
<Form.Field.OTPInput name="otp" />