@letar/forms — Declarative Form Components for React

Full example

The complete sandbox example, read directly from the form-develop-app source at build time — switch framework/skin to see Form.FromTemplate wired to a real form. No shadcn/Vue/Angular equivalent exists yet — those tabs show as disabled.

apps/form-develop-app/src/app/templates-demo/page.tsx

'use client'

import { Box, Heading, SimpleGrid, Text, VStack } from '@chakra-ui/react'
import { Form, templates } from '@letar/forms'
import { useState } from 'react'
import { DemoPageLayout } from '../_components'

export default function TemplatesDemoPage() {
  const [submittedData, setSubmittedData] = useState<Record<string, unknown> | null>(null)
  const [selectedTemplate, setSelectedTemplate] = useState<string>('contactForm')

  const allTemplates = Object.values(templates)
  const current = templates[selectedTemplate as keyof typeof templates]

  return (
    <DemoPageLayout title="Form Templates" description="10 готовых шаблонов форм — выберите и используйте">
      <VStack gap={6} align="stretch">
        {/* Каталог шаблонов */}
        <Box>
          <Heading size="md" mb={3}>
            Каталог шаблонов
          </Heading>
          <SimpleGrid columns={{ base: 2, md: 3, lg: 5 }} gap={2}>
            {allTemplates.map((t) => (
              <Box
                key={t.name}
                p={3}
                borderWidth="2px"
                borderColor={selectedTemplate === t.name ? 'blue.500' : 'border'}
                borderRadius="md"
                cursor="pointer"
                onClick={() => setSelectedTemplate(t.name)}
                _hover={{ borderColor: 'blue.400' }}
                transitionProperty="border-color"
                transitionDuration="0.15s"
              >
                <Text fontSize="sm" fontWeight="medium">
                  {t.title}
                </Text>
                <Text fontSize="xs" color="fg.muted">
                  {t.category}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </Box>

        {/* Выбранный шаблон */}
        {current && (
          <Box>
            <Heading size="md" mb={1}>
              {current.title}
            </Heading>
            <Text fontSize="sm" color="fg.muted" mb={4}>
              {current.description}
            </Text>
            <Form.FromTemplate
              template={current}
              onSubmit={(data) => setSubmittedData(data as Record<string, unknown>)}
              debug
            />
          </Box>
        )}

        {submittedData && (
          <Box p={4} bg="bg.subtle" borderRadius="md">
            <Heading size="sm" mb={2}>
              Отправленные данные:
            </Heading>
            <pre style={{ fontSize: '12px', overflow: 'auto' }}>{JSON.stringify(submittedData, null, 2)}</pre>
          </Box>
        )}
      </VStack>
    </DemoPageLayout>
  )
}

Overview

Form Templates provide pre-built form schemas with default values for common use cases. Use them as-is or customize with overrides.

Quick Start

import { templates } from '@letar/forms'

;<Form.FromTemplate template={templates.contactForm} onSubmit={handleSubmit} submitLabel="Send Message" />

Available Templates

Template	Fields	Category
`loginForm`	email, password	Auth
`registerForm`	name, email, password, confirmPassword	Auth
`forgotPasswordForm`	email	Auth
`contactForm`	name, email, phone, message	Feedback
`feedbackForm`	rating, category, message, email	Feedback
`npsForm`	score (0-10), reason, email	Survey
`companyRegistration`	inn, kpp, ogrn, name, address, bik, account	Business
`orderForm`	items[], customer, address, email	E-commerce
`profileForm`	firstName, lastName, email, phone	Profile
`addressForm`	country, city, street, building, apartment, zip	Address

Customization

<Form.FromTemplate
  template={templates.registerForm}
  override={{
    exclude: ['confirmPassword'],
    fields: { email: { label: 'Work Email' } },
  }}
  onSubmit={handleSubmit}
/>

Headless Usage

Use just the schema and default values without the UI:

const { schema, defaultValues } = templates.contactForm

// Use in your own form
<Form schema={schema} initialValue={defaultValues} onSubmit={fn}>
  {/* Your custom layout */}
</Form>

Custom Templates

Create your own templates using the FormTemplate interface:

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

export const myTemplate: FormTemplate = {
  name: 'myTemplate',
  title: 'My Form',
  description: 'Custom form template',
  category: 'feedback',
  schema: z.object({ ... }).strip(),
  defaultValues: { ... },
  renderFields: () => null,
}

Live Example

Try the interactive example on forms-example.letar.best.

Form Templates

On this page