Quick Start

import { z } from 'zod/v4'

const ContactSchema = z.object({
  name: z
    .string()
    .min(2)
    .max(100)
    .meta({
      ui: { title: 'Full Name', placeholder: 'John Doe' },
    }),
  email: z
    .string()
    .email()
    .meta({
      ui: { title: 'Email', placeholder: 'john@example.com' },
    }),
  message: z
    .string()
    .min(10)
    .max(1000)
    .meta({
      ui: { title: 'Message', placeholder: 'Tell us about your project...' },
    }),
})

import { Form } from '@letar/forms'

function ContactForm() {
  return (
    <Form
      schema={ContactSchema}
      initialValue={{ name: '', email: '', message: '' }}
      onSubmit={async ({ value }) => {
        const response = await fetch('/api/contact', {
          method: 'POST',
          body: JSON.stringify(value),
        })
        if (response.ok) {
          alert('Message sent!')
        }
      }}
    >
      <Form.Field.String name="name" />
      <Form.Field.String name="email" />
      <Form.Field.Textarea name="message" />
      <Form.Button.Submit loadingText="Sending...">Send Message</Form.Button.Submit>
    </Form>
  )
}