@letar/forms за 5 минут

--TL;DR: Установка → схема → 5 строк JSX → работающая форма с валидацией, accessibility и TypeScript.

Quick Start: установка, первая форма, результат. Без философии — только код.

Установка

npm install @letar/forms @chakra-ui/react zod

работает с React 19, Chakra UI v3 и Zod v4.

Первая форма

import { Form } from '@letar/forms'
import { z } from 'zod/v4'

// 1. Схема — единый источник правды для валидации и UI
const ContactSchema = z.object({
  name: z
    .string()
    .min(2)
    .meta({
      ui: { title: 'Имя', placeholder: 'Как вас зовут?' },
    }),
  email: z
    .string()
    .email()
    .meta({
      ui: { title: 'Email', placeholder: 'user@example.com' },
    }),
  message: z
    .string()
    .max(1000)
    .meta({
      ui: { title: 'Сообщение' },
    }),
})

// 2. Форма — 5 строк JSX
function ContactForm() {
  return (
    <Form
      schema={ContactSchema}
      initialValue={{ name: '', email: '', message: '' }}
      onSubmit={async ({ value }) => {
        await fetch('/api/contact', {
          method: 'POST',
          body: JSON.stringify(value),
        })
      }}
    >
      <Form.Field.String name="name" />
      <Form.Field.String name="email" />
      <Form.Field.Textarea name="message" />
      <Form.Button.Submit>Отправить</Form.Button.Submit>
    </Form>
  )
}

Что уже работает:

Валидация

Label и placeholder

Ошибки

TypeScript

Accessibility

Submit

Ещё короче: автогенерация

<Form.FromSchema
  schema={ContactSchema}
  initialValue={{ name: '', email: '', message: '' }}
  onSubmit={handleSubmit}
  submitLabel="Отправить"
/>

Одна строка вместо ручной вёрстки. Библиотека сама выбирает компоненты по типам Zod-схемы.

Loading state за 1 строку

Пока данные для формы грузятся с сервера, обычно нужно показать скелетон. Без библиотеки это 15–20 строк ручных

. С

import { FormSkeleton } from '@letar/forms'

// Скелетон автоматически повторяет структуру формы
<FormSkeleton fields={ContactSchema} showSubmit />

читает Zod-схему и создаёт скелетон с нужным количеством полей и кнопкой отправки. Когда данные загрузились — просто рендерите

вместо скелетона:

{
  isLoading
    ? <FormSkeleton fields={ContactSchema} showSubmit />
    : (
      <Form schema={ContactSchema} initialValue={data} onSubmit={save}>
        ...
      </Form>
    )
}