Skip to content
zedkit
@zedtech/zedkit-ui

Form

Validated forms (schema, field errors, pending submit) on react-hook-form + zod.

beta@zedtech/zedkit-ui

Wraps: react-hook-form, @hookform/resolvers, zod

Shown to other members of the workspace.

View props table
Who is it for?
Developers collecting validated input with accessible errors.
When should I use it?
For any form needing validation or async submit.
When should I pick something else?
For a single search box — use Input directly instead.

Use it

Simple
import { Form, FormField, FormSubmit, Input, useValidatedForm } from "@zedtech/zedkit-ui";
const form = useValidatedForm<Values>(schemaFromContracts, { defaultValues });
// <Form {...form}><form onSubmit={form.handleSubmit(save)}>
// <FormField control={form.control} name="name" render={...} />
// <FormMessage /> shows the error; <FormSubmit pendingLabel={t.saving}>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    Simple
    import { Form, FormField, FormSubmit, Input, useValidatedForm } from "@zedtech/zedkit-ui";

const form = useValidatedForm<Values>(schemaFromContracts, { defaultValues });
// <Form {...form}><form onSubmit={form.handleSubmit(save)}>
// <FormField control={form.control} name="name" render={...} />
// <FormMessage /> shows the error; <FormSubmit pendingLabel={t.saving}>

Package version 2.0.1.

Props

Prop

Type

Accessibility

FormLabel targets the control through htmlFor; FormControl sets aria-invalid and links the description and the error message with aria-describedby. FormMessage is plain text and is not a live region: after a failed submit react-hook-form moves focus to the first invalid field (shouldFocusError, on by default), which is what makes the error reach screen-reader users. FormSubmit is disabled while submitting, so do not rely on it for the only error path.

IconLabel

Fixed-size muted icon + label row; icon is `aria-hidden`, label stays readable.

Input

Labelled text input with consistent styling and focus states.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelated