Formalidad

Un envoltorio para elementos de formulario que proporciona validación y manejo de errores.

xph0000xUso

Se utiliza en un Form, proporciona validación y manejo de errores.

Label

Utilice el prop label para establecer la etiqueta del control de formulario.

label

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

El atributo de etiqueta for y el control de formulario se asocian con un id único si no se proporciona.

Cuando se utiliza el prop required, se añade un asterisco junto a la etiqueta.

required

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

Descripción

Utilice el prop description para proporcionar información adicional debajo de la etiqueta.

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 (en inglés)

Utilice el accesorio hint para mostrar un mensaje de sugerencia junto a la etiqueta.

hint

EmailOptional

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

Ayuda

Utilice el prop help para mostrar un mensaje de ayuda debajo del control de formulario. Cuando se usa junto con el prop error, el prop error tiene prioridad.

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 (en inglés)

Utilice la prop error para mostrar un mensaje de error debajo del control de formulario. Cuando se usa junto con la prop help, la prop error tiene prioridad.

Cuando se utiliza dentro de un Form, se establece automáticamente cuando se produce un error de validación.

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>

Esto establece el color a error en el control de formulario. Puede cambiarlo globalmente en su app.config.ts.

Patrón de Error

Esto es especialmente relevante para los componentes con valores de matriz como InputTags, donde los errores incluyen índices de matriz en su nombre (por ejemplo, tags.0).

Vea un ejemplo de cómo usar error-pattern dentro de un formulario.

Tamaño

Utilice el prop size para cambiar el tamaño del FormField, el size se proxy para el control de formulario.

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>

Orientación: badge{label="4.3+" class="align-text-top"}

Utilice el prop orientation para cambiar el diseño del FormField. Defaults a 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 (Edición española)

Props (accesorios)

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 en línea

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

Temas

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 (Edición española)

No recent changes

Form

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

Input

An input element to enter text.