FormField

バリデーションとエラー処理を提供するフォーム要素のラッパー。

使用法

フォームコンポーネントをFormFieldでラップします。Formで使用され、バリデーションとエラー処理を提供します。

Label

labelプロパティを使用して、フォームコントロールのラベルを設定します。

label

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

ラベルfor属性とフォームコントロールは、指定されていない場合、一意のidに関連付けられます。

requiredプロパティを使用する場合、ラベルの横にアスタリスクが追加されます。

required

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

Description

descriptionプロパティを使用して、ラベルの下に追加情報を入力します。

description

We'll never share your email with anyone else.

<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プロパティを使用して、ラベルの横にヒントメッセージを表示します。

hint

EmailOptional

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

ヘルプ

helpプロパティを使用して、フォームコントロールの下にヘルプメッセージを表示します。errorプロパティと一緒に使用すると、errorプロパティが優先されます。

help

Please enter a valid email address.

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

Error

フォームコントロールの下にエラーメッセージを表示するには、errorプロパティを使用します。helpプロパティと一緒に使用すると、errorプロパティが優先されます。

Form内で使用すると、バリデーションエラー発生時に自動的に設定されます。

error

Please enter a valid email address.

<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でグローバルに変更できます。

Errorパターン

error-patternプロパティを使用して、フォームエラーを正規表現でマッチさせます。これは、InputTagsのような配列値を持つコンポーネントに特に関連しています。エラーは名前に配列インデックスを含みます例tags.0。

フォーム内でerror-patternを使用する例を参照してください。

サイズ

sizeプロパティを使用してFormFieldのサイズを変更します。sizeはフォームコントロールにプロキシされます。

size

EmailOptional

We'll never share your email with anyone else.

Please enter a valid email address.

<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>

Orientation badge{label="4.3+" class="align-text-top"}

orientationプロパティを使用してFormFieldのレイアウトを変更します。デフォルトはverticalです。

orientation

help

Please enter a valid email address.

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

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`name`		`string` The name of the FormField. Also used to match form errors.
`errorPattern`		`RegExp` A regular expression to match form error names. Useful for components with array values such as InputTags, where errors include array indices in their name (e.g. `tags.0`).
`label`		`string`
`description`		`string`
`help`		`string`
`error`	`undefined`	`string \| false \| true`
`hint`		`string`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`required`		`boolean`
`eagerValidation`		`boolean` If true, validation on input will be active immediately instead of waiting for a blur event.
`validateOnInputDelay`	`300`	`number` Delay in milliseconds before validating the form on input events.
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` The orientation of the form field.
`ui`		`{ root?: SlotClass; wrapper?: SlotClass; labelWrapper?: SlotClass; label?: SlotClass; container?: SlotClass; description?: SlotClass; error?: SlotClass; hint?: SlotClass; help?: SlotClass; }`

スロット

Slot	Type
`label`	`{ label: string \| undefined; }`
`hint`	`{ hint: string \| undefined; }`
`description`	`{ description: string \| undefined; }`
`help`	`{ help: string \| undefined; }`
`error`	`{ error: string \| true \| undefined; }`
`default`	`{ error: string \| true \| undefined; }`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    formField: {
      slots: {
        root: '',
        wrapper: '',
        labelWrapper: 'flex content-center items-center justify-between gap-1',
        label: 'block font-medium text-default',
        container: '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"
          }
        },
        orientation: {
          vertical: {
            container: 'mt-1'
          },
          horizontal: {
            root: 'flex justify-between place-items-baseline gap-2'
          }
        }
      },
      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 gap-1',
            label: 'block font-medium text-default',
            container: '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"
              }
            },
            orientation: {
              vertical: {
                container: 'mt-1'
              },
              horizontal: {
                root: 'flex justify-between place-items-baseline gap-2'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Form

A form component with built-in validation and submission handling.

Input

An input element to enter text.