Lumi UI

表单

一个原生的 form 元素，提供统一的错误处理。

DocsAPI Reference

安装

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

基本用法

Form 通常与 Field 一同组合使用。

import { Form } from "@/components/ui/form"
import { Field, FieldLabel, FieldControl, FieldError, FieldDescription } from "@/components/ui/field"
<Form>
  <Field name="username">
    <FieldLabel>用户名</FieldLabel>
    <FieldControl required minLength={3} />
    <FieldDescription>公开显示的名称。</FieldDescription>
    <FieldError />
  </Field>
</Form>

实用示例

原生提交

表单提交回调

配合 Zod 使用

配合 Server Action 和 Zod 使用

Select apple to see error

与其他组件集成

详见 表单指南。