---
url: /components/field.md
---
# Field 字段包装

`EvField` 是表单字段的排版外壳：标签 + 控件插槽 + 错误/提示文案。它不接管值与校验，
只负责一个字段的视觉结构 —— 与 [EvInput](./input) / [EvTextarea](./textarea) /
[EvSelect](./select) 任意组合出前台提交表单。

## 基础用法

```vue
<EvField label="称呼" required>
  <EvInput v-model="name" />
</EvField>
<EvField label="邮箱" hint="仅用于回复，不会公开">
  <EvInput v-model="email" type="email" />
</EvField>
<EvField label="邮箱" :error="emailError">
  <EvInput v-model="email" :error="!!emailError" />
</EvField>
```

::: tip 与 EvContactForm 的分工
三个字段以内的简单联系表单直接用 [EvContactForm](./contact-form)（已内置校验与成功态）；
字段更多或需要自定义校验流程时，用 EvField + 各输入组件自由组装。
:::

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 字段标签 | string | — |
| error | 错误提示（非空即错误态） | string | — |
| hint | 提示文案（有 error 时隐藏） | string | — |
| required | 必填星标 | boolean | `false` |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| default | 控件区（放任意输入组件） |
| label / hint | 标签/提示覆写 |