forms

FormGroup

Display a label and additional informations around a form element.

Usage

Use the FormGroup component around an Input, Textarea, Select or a SelectMenu with the name prop to automatically associate a <label> element with the form element.

<UFormGroup label="Email" name="email">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>

Required

Use the required prop to indicate that the form element is required.

<UFormGroup label="Email" required name="group-required">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>

Description

Use the description prop to display a description below the label.

We'll only use this for spam.

<UFormGroup  label="Email"  description="We'll only use this for spam."  name="group-description">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>

Hint

Use the hint prop to display a hint above the form element.

Optional
<UFormGroup label="Email" hint="Optional" name="group-hint">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>

Help

Use the help prop to display an help message below the form element.

We will never share your email with anyone else.

<UFormGroup  label="Email"  help="We will never share your email with anyone else."  name="group-help">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>

Error

Use the error prop to display an error message below the form element.

When used together with the help prop, the error prop will take precedence.

You must enter an email

<template>  <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />  </UFormGroup></template><script setup lang="ts">const email = ref('')</script>
The error prop will automatically set the color prop of the form element to red.

You can also use the error prop as a boolean to mark the form element as invalid.

<UFormGroup label="Email" error name="group-error">  <UInput placeholder="you@example.com" /></UFormGroup>
Learn more about form validation in the Form component.

Size

Use the size prop to change the size of the label and the form element.

Optional

We'll only use this for spam.

We will never share your email with anyone else.

<UFormGroup  size="xl"  label="Email"  hint="Optional"  description="We'll only use this for spam."  help="We will never share your email with anyone else.">  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" /></UFormGroup>
This will only work with form elements that support the size prop.

Slots

label New

Use the #label slot to set the custom content for label.

<UFormGroup>  <template #label>    <UAvatar      src="https://avatars.githubusercontent.com/u/739984?v=4"      size="3xs"    />  </template>  <template #default>    <UInput model-value="benjamincanac" placeholder="you@example.com" />  </template></UFormGroup>

description New

Use the #description slot to set the custom content for description.

Write only valid email address

<UFormGroup label="Email">  <template #description>    Write only valid email address    <UIcon name="i-heroicons-arrow-right-20-solid" />  </template>  <template #default>    <UInput model-value="benjamincanac" placeholder="you@example.com" />  </template></UFormGroup>

hint New

Use the #hint slot to set the custom content for hint.

<UFormGroup label="Step 1">  <template #hint>    <UIcon name="i-heroicons-arrow-right-20-solid" />  </template>  <template #default>    <UInput model-value="benjamincanac" placeholder="you@example.com" />  </template></UFormGroup>

help New

Use the #help slot to set the custom content for help.

Here are some examples

<UFormGroup label="Email">  <template #help>    Here are some examples <UIcon name="i-heroicons-arrow-right-20-solid" />  </template>  <template #default>    <UInput model-value="benjamincanac" placeholder="you@example.com" />  </template></UFormGroup>

error New

Use the #error slot to set the custom content for error.

You must enter an email

<template>  <UFormGroup label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">    <template #default="{ error }">      <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />    </template>    <template #error="{ error }">      <UAlert v-if="error" icon="i-heroicons-exclamation-triangle-20-solid" :title="error" color="red" />      <UAlert v-else icon="i-heroicons-check-circle-20-solid" title="Your email is valid" color="green" />    </template>  </UFormGroup></template><script setup lang="ts">const email = ref('')</script>

Props

name
string
null
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl"
null
ui
any
undefined
error
string | boolean
null
label
string
null
help
string
null
description
string
null
hint
string
null
required
boolean
false

Preset

UFormGroup.vue
{  "wrapper": "",  "label": {    "wrapper": "flex content-center items-center justify-between",    "base": "block font-medium text-gray-700 dark:text-gray-200",    "required": "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400"  },  "size": {    "2xs": "text-xs",    "xs": "text-xs",    "sm": "text-sm",    "md": "text-sm",    "lg": "text-sm",    "xl": "text-base"  },  "container": "mt-1 relative",  "description": "text-gray-500 dark:text-gray-400",  "hint": "text-gray-500 dark:text-gray-400",  "help": "mt-2 text-gray-500 dark:text-gray-400",  "error": "mt-2 text-red-500 dark:text-red-400",  "default": {    "size": "sm"  }}