forms

FormGroup

GitHub

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Required

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Description

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

We'll only use this for spam.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Hint

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

Optional
{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Help

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

We will never share your email with anyone else.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}
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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}
This will only work with form elements that support the size prop.

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

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

Range

Display a range field

Form

Collect and validate form data.