Forms

Overview

SiteKnock's form components give you accessible, validated form fields that pair the UI kit's inputs with Zod schemas for type-safe validation and clear error display.

Form fields

The FormField component connects a label, an input, and validation error display:

import { FormField } from "@siteknock/forms/form-field"
import { Input } from "@siteknock/ui"

<FormField label="Email" error={errors.email}>
  <Input type="email" data-testid="email" />
</FormField>

Validation with Zod

Define a schema once and get type-safe validation and inferred types:

import { z } from "zod"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

Common patterns

Building a custom form

1. Define a Zod schema for validation.
2. Use the form field components with the UI kit's inputs.
3. Add data-testid to every interactive element.
4. Use i18n keys for labels, placeholders, and error messages.

Next steps