Lumi UILumi UI

Form

A native form element with consolidated error handling.

DocsAPI Reference

Installation

pnpm dlx shadcn@latest add @lumi-ui/form

Basic Usage

Form is composed together with Field.

import { Form } from "@/components/ui/form"
import { Field, FieldLabel, FieldControl, FieldError, FieldDescription } from "@/components/ui/field"
<Form>
  <Field name="username">
    <FieldLabel>Username</FieldLabel>
    <FieldControl required minLength={3} />
    <FieldDescription>Public display name.</FieldDescription>
    <FieldError />
  </Field>
</Form>

Cookbook

Native Submit

On Form Submit

With Zod

With Server Action and Zod

Select apple to see error

Integration with other components

See Form Guide for details.