# 表单页场景（Vue 3）

## 录入表单

```vue
<script setup lang="ts">
import { reactive, ref } from 'vue'

import type { FormInstance, FormRules } from 'win-design-next'

const formRef = ref<FormInstance>()
const form = reactive({ name: '', status: '' })
const rules: FormRules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur', type: 'string' },
  ],
}

const submit = async () => {
  await formRef.value?.validate()
  // 提交逻辑
}
</script>

<template>
  <w-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="100px"
    label-position="right"
  >
    <w-form-item label="名称" prop="name">
      <w-input v-model="form.name" placeholder="请输入" />
    </w-form-item>
    <w-form-item label="状态" prop="status">
      <w-select v-model="form.status" placeholder="请选择" clearable>
        <w-option label="启用" value="1" />
        <w-option label="禁用" value="0" />
      </w-select>
    </w-form-item>
    <w-form-item>
      <w-button type="primary" @click="submit">保存</w-button>
      <w-button @click="formRef?.resetFields()">重置</w-button>
    </w-form-item>
  </w-form>
</template>
```

详见 [design-patterns/form.md](../design-patterns/form.md)。
