Nuxt UI v4 is officially released!

Components

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 a label. The <label> will automatically be associated with the form element so it gets focused on click.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "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": {},
  "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": {},
  "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": {},
  "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": {},
  "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

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

Eager Validation

By default, validation is only triggered after the initial blur event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the eager-validation prop to true

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

Slots

label

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

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

description

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

Write only valid email address 

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

hint

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

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

help

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

Here are some examples 

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

error

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

You must enter an email

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

Props

name
string
null
size
FormGroupSize
null
"md""2xs""xs""sm""lg""xl"
label
string
null
ui
{ wrapper?: string; inner?: string; label?: DeepPartial<{ wrapper: string; base: string; required: string; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; container?: string; description?: string; hint?: string; help?: string; error?: string; default?: DeepPartial<{ size: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
error
string | boolean
null
help
string
null
description
string
null
hint
string
null
required
boolean
false
eagerValidation
boolean
false

Config

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

Form

Collect and validate form data.

HorizontalNavigation

Display a list of horizontal links.