Formées Field

Un wrapper pour les éléments de formulaire qui fournit la validation et la gestion des erreurs.

Utilisation

Utilisé dans un Form, il assure la validation et la gestion des erreurs.

étiquette

Utilisez la prop label pour définir l'étiquette du contrôle de formulaire.

label

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

L'attribut label for et le contrôle de formulaire sont associés à un id unique s'ils ne sont pas fournis.

Lorsque vous utilisez le prop required, un astérisque est ajouté à côté de l'étiquette.

required

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

Description

Utilisez le prop description pour fournir des informations supplémentaires sous l'étiquette.

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>

référence

Utilisez le prop hint pour afficher un message d'allusion à côté de l'étiquette.

hint

EmailOptional

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

Aide

Utilisez la prop help pour afficher un message d'aide sous le contrôle de formulaire. Lorsqu 'elle est utilisée avec la prop error, la prop error a priorité.

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>

Erreur

Utilisez la prop error pour afficher un message d'erreur sous le contrôle de formulaire. Lorsqu 'il est utilisé avec la prop help, la prop error a la priorité.

Lorsqu 'il est utilisé à l'intérieur d'un Form, il est automatiquement défini lorsqu' une erreur de validation se produit.

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>

Cela définit le color à error sur le contrôle de formulaire. Vous pouvez le modifier globalement dans votre app.config.ts.

Erreur de référence

Ceci est particulièrement pertinent pour les composants avec des valeurs de tableau telles que InputTags, où les erreurs incluent des indices de tableau dans leur nom (par exemple, tags.0).

Voir un exemple d'utilisation de error-pattern dans un formulaire.

Size

Utilisez la prop size pour modifier la taille du FormField, le size est proxié au contrôle de formulaire.

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

Utilisez la prop orientation pour modifier la disposition du FormField. Defaults à 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 équipements

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; }`

Slots

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; }`

Thème

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

No recent changes

Form

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

Input

An input element to enter text.