---
title: 组合表单
description: 组合 Field、Input 和 Button，同时让领域状态继续由应用管理。
order: 30
toc:
  - id: create-the-form
    title: 创建表单
  - id: validation
    title: 表单验证
  - id: styling
    title: 样式
---

## 创建表单 {#create-the-form}

```tsx
import { Button } from "@workspace/ui/components/button"
import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field"
import { Input } from "@workspace/ui/components/input"

;<form onSubmit={saveProfile}>
  <Field>
    <FieldLabel htmlFor="display-name">显示名称</FieldLabel>
    <Input id="display-name" name="displayName" />
    <FieldError>{errors.displayName}</FieldError>
  </Field>
  <Button type="submit">保存资料</Button>
</form>
```

## 表单验证 {#validation}

UI 包负责渲染验证状态，但不会指定表单库或 Schema。请在应用边界连接原生表单数据、React 状态或表单框架。

## 样式 {#styling}

受支持的语义变化使用组件变体，局部布局使用 `className`。需要合并条件类名或消费者覆盖时，使用 `@workspace/ui/lib/utils` 中的 `cn`。