FormField

GitHub

一个用于表单元素的包裹组件，提供验证和错误处理能力。

用法

使用 FormField 包裹任何表单组件。在 Form 中使用时，它提供验证和错误处理。

描述

使用 description prop 在标签下方提供附加信息。

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 prop 在标签旁边显示提示信息。

hint

邮箱可选

<template>
  <UFormField label="Email" hint="Optional">
    <UInput placeholder="Enter your email" />
  </UFormField>
</template>

帮助信息

使用 help prop 在表单控件下方显示帮助信息。

help

邮箱

请输入有效的电子邮件地址。

<template>
  <UFormField label="Email" help="Please enter a valid email address.">
    <UInput placeholder="Enter your email" class="w-full" />
  </UFormField>
</template>

错误

使用 error prop 在表单控件下方显示错误信息。与 help prop 一起使用时，error prop 具有更高优先级。

在 Form 内部使用时，当发生验证错误时会自动设置此值。

error

邮箱

请输入有效的电子邮件地址。

<template>
  <UFormField label="Email" error="Please enter a valid email address.">
    <UInput placeholder="Enter your email" class="w-full" />
  </UFormField>
</template>

这会将表单控件的 color 设置为 error。您可以在全局的 app.config.ts 中更改它。

尺寸

使用 size prop 更改 FormField 的尺寸，该 size 会代理到表单控件。

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>

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应该渲染为的元素或组件。
`name`		`string` FormField 的名称。也用于匹配表单错误。
`errorPattern`		`RegExp` 用于匹配表单错误名称的正则表达式。
`label`		`string`
`description`		`string`
`help`		`string`
`error`		`string \| false \| true`
`hint`		`string`
`size`	`'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`	`{ hint?: string \| undefined; }`
`description`	`{ description?: string \| undefined; }`
`help`	`{ help?: string \| undefined; }`
`error`	`{ error?: string \| boolean \| undefined; }`
`默认`	`{ error?: string \| boolean \| undefined; }`

主题

app.config.ts

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'
      }
    }
  }
})

vite.config.ts

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'
          }
        }
      }
    })
  ]
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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'
          }
        }
      }
    })
  ]
})

Form

一个具有内置验证和提交处理的表单组件。

Icon

一个用于显示来自 Iconify 的任何图标的组件。