使用 FormField 包装任何表单组件。在 Form 中使用时，它提供验证和错误处理。
使用 label 属性设置表单控件的标签。
<template>
<UFormField label="Email">
<UInput placeholder="Enter your email" />
</UFormField>
</template>
for 属性和表单控件将关联一个唯一的 id。使用 required 属性时，标签旁会添加一个星号。
<template>
<UFormField label="Email" required>
<UInput placeholder="Enter your email" />
</UFormField>
</template>
使用 description 属性在标签下方提供额外信息。
我们绝不会与任何人分享您的电子邮件。
<template>
<UFormField label="Email" description="We'll never share your email with anyone else.">
<UInput placeholder="Enter your email" class="w-full" />
</UFormField>
</template>
使用 hint 属性在标签旁边显示提示信息。
<template>
<UFormField label="Email" hint="Optional">
<UInput placeholder="Enter your email" />
</UFormField>
</template>
使用 help 属性在表单控件下方显示帮助信息。
<template>
<UFormField label="Email" help="Please enter a valid email address.">
<UInput placeholder="Enter your email" class="w-full" />
</UFormField>
</template>
使用 error 属性在表单控件下方显示错误信息。当与 help 属性一起使用时，error 属性优先。
在 Form 内部使用时，当发生验证错误时会自动设置此项。
<template>
<UFormField label="Email" error="Please enter a valid email address.">
<UInput placeholder="Enter your email" class="w-full" />
</UFormField>
</template>
使用 size 属性更改 FormField 的大小，size 会代理到表单控件。
我们绝不会与任何人分享您的电子邮件。
<template>
<UFormField
label="Email"
description="We'll never share your email with anyone else."
hint="Optional"
help="Please enter a valid email address."
size="xl"
>
<UInput placeholder="Enter your email" class="w-full" />
</UFormField>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
name | stringFormField 的名称。也用于匹配表单错误。 | |
errorPattern | RegExp用于匹配表单错误名称的正则表达式。 | |
label | string | |
description | string | |
帮助 | string | |
error | string | false | true | |
提示 | string | |
尺寸 | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
required | boolean | |
eagerValidation | boolean如果为 true，则输入时会立即激活验证，而不是等待 blur 事件。 | |
validateOnInputDelay | `300` | number在输入事件上验证表单前的延迟（毫秒）。 |
ui | { root?: ClassNameValue; wrapper?: ClassNameValue; labelWrapper?: ClassNameValue; label?: ClassNameValue; container?: ClassNameValue; description?: ClassNameValue; error?: ClassNameValue; hint?: ClassNameValue; help?: ClassNameValue; } |
| 插槽 | 类型 |
|---|---|
label | { label?: string | undefined; } |
提示 | { hint?: string | undefined; } |
description | { description?: string | undefined; } |
帮助 | { help?: string | undefined; } |
error | { error?: string | boolean | undefined; } |
default | { error?: string | boolean | undefined; } |
export default defineAppConfig({
ui: {
formField: {
slots: {
root: '',
wrapper: '',
labelWrapper: 'flex content-center items-center justify-between',
label: 'block font-medium text-default',
container: 'mt-1 relative',
description: 'text-muted',
error: 'mt-2 text-error',
hint: 'text-muted',
help: 'mt-2 text-muted'
},
variants: {
size: {
xs: {
root: 'text-xs'
},
sm: {
root: 'text-xs'
},
md: {
root: 'text-sm'
},
lg: {
root: 'text-sm'
},
xl: {
root: 'text-base'
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-error"
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
formField: {
slots: {
root: '',
wrapper: '',
labelWrapper: 'flex content-center items-center justify-between',
label: 'block font-medium text-default',
container: 'mt-1 relative',
description: 'text-muted',
error: 'mt-2 text-error',
hint: 'text-muted',
help: 'mt-2 text-muted'
},
variants: {
size: {
xs: {
root: 'text-xs'
},
sm: {
root: 'text-xs'
},
md: {
root: 'text-sm'
},
lg: {
root: 'text-sm'
},
xl: {
root: 'text-base'
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-error"
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})