FormVeld

GitHub
Een wrapper voor formulierelementen die validatie en foutafhandeling biedt.

Gebruik

Wikkel elk formulieronderdeel in met een FormField. Gebruikt in een Form, biedt het validatie en foutafhandeling.

Label

Gebruik de label prop om het label voor het formulierbesturingselement in te stellen.

<template>
  <UFormField label="Email">
    <UInput placeholder="Enter your email" />
  </UFormField>
</template>
Het kenmerk label for en het formulierbesturingselement worden geassocieerd met een unieke id indien niet verstrekt.

Bij gebruik van de required prop wordt naast het label een sterretje toegevoegd.

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

Beschrijving

Gebruik de description prop om aanvullende informatie onder het label te geven.

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

Gebruik de hint prop om een hint bericht naast het label weer te geven.

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

Hulp

Gebruik de help prop om een helpbericht onder het formulierbesturingselement weer te geven. Bij gebruik samen met de error prop heeft de error prop voorrang.

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>

Fout

Gebruik de error prop om een foutmelding onder het formulierbesturingselement weer te geven. Bij gebruik samen met de help prop heeft de error prop voorrang.

Bij gebruik binnen een Form wordt dit automatisch ingesteld wanneer er een validatiefout optreedt.

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>
Dit stelt de color in op error op het formulierbesturingselement. U kunt het globaal wijzigen in uw app.config.ts.

Foutpatroon

Gebruik de error-pattern prop om formulierfouten te matchen met een reguliere expressie. Dit is vooral relevant voor componenten met matrixwaarden zoals InputTags, waarbij fouten matrixindices in hun naam bevatten (bijv. tags.0).

Zie een voorbeeld van het gebruik van error-pattern binnen een formulier.

Grootte

Gebruik de size prop om de grootte van het FormField te wijzigen, de size is gekoppeld aan het formulierbesturingselement.

Optional

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>

Oriëntatie: badge{label="4.3+" class="align-text-top"}

Gebruik de orientation prop om de lay-out van het FormField te wijzigen. Standaard is vertical.

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

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

Thema

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

Wijzigingsgelog

No recent changes

Form

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

Input

An input element to enter text.