@letar/forms — Declarative Form Components for React

Поля ввода текста — String, Textarea, Password, MaskedInput, RichText

String

API: Form.Field.String

Стандартное однострочное текстовое поле. Самый распространённый тип.

const Schema = z.object({
  name: z.string().min(2).max(100).meta({
    ui: { title: 'Полное имя', placeholder: 'Введите имя' },
  }),
})

<Form.Field.String name="name" />

Автоматические ограничения

Zod constraints автоматически применяются к элементу input:

z.string().min(2).max(100)
// → minLength={2} maxLength={100} на <input>

z.string().email()
// → type="email"

z.string().url()
// → type="url"

Textarea

API: Form.Field.Textarea

Многострочное поле для длинного текста.

const Schema = z.object({
  description: z.string().min(10).max(2000).meta({
    ui: { title: 'Описание', placeholder: 'Опишите ваш проект...' },
  }),
})

<Form.Field.Textarea name="description" />

Password

API: Form.Field.Password

Поле пароля с кнопкой переключения видимости.

const Schema = z.object({
  password: z.string().min(8).meta({
    ui: { title: 'Пароль' },
  }),
})

<Form.Field.Password name="password" />

MaskedInput

API: Form.Field.MaskedInput

Поле с маской формата для структурированных данных. Требует peer-зависимость use-mask-input.

Маска задаётся пропом mask самого компонента, а не через ui в Zod meta() — ключа mask в FieldUIMeta нет.

const Schema = z.object({
  phone: z.string().meta({
    ui: { title: 'Телефон' },
  }),
  creditCard: z.string().meta({
    ui: { title: 'Номер карты' },
  }),
})

<Form.Field.MaskedInput name="phone" mask="+7 (999) 999-99-99" />
<Form.Field.MaskedInput name="creditCard" mask="9999 9999 9999 9999" />

RichText

API: Form.Field.RichText

Редактор форматированного текста для HTML/markdown контента.

const Schema = z.object({
  content: z.string().meta({
    ui: { title: 'Содержание статьи' },
  }),
})

<Form.Field.RichText name="content" />

Требуются peer-зависимости: @tiptap/react и @tiptap/starter-kit.

Editable

API: Form.Field.Editable

Инлайн-редактирование — клик по тексту для редактирования, Enter или blur для сохранения.

<Form.Field.Editable name="nickname" />

Текстовые поля