---
description: Display a label and additional informations around a form element.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/FormGroup.ts
---


## Usage

Use the FormGroup component around an [Input](/forms/input), [Textarea](/forms/textarea), [Select](/forms/select) or a [SelectMenu](/forms/select-menu) with the `name` prop to automatically associate a `<label>` element with the form element.

::component-card
---
props:
  name: 'email'
  label: 'Email'
code: >-

  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
---

#default
:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
::

### Required

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

::component-card
---
baseProps:
  name: 'group-required'
props:
  label: 'Email'
  required: true
code: >-

  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
---

#default
:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
::

### Description

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

::component-card
---
baseProps:
  name: 'group-description'
props:
  label: 'Email'
  description: "We'll only use this for spam."
code: >-

  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
---

#default
:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
::

### Hint

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

::component-card
---
baseProps:
  name: 'group-hint'
props:
  label: 'Email'
  hint: 'Optional'
code: >-

  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
---

#default
:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
::

### Help

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

::component-card
---
baseProps:
  name: 'group-help'
props:
  label: 'Email'
  help: 'We will never share your email with anyone else.'
code: >-

  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
---

#default
:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
::

### 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.

::component-card
---
baseProps:
  name: 'group-error'
props:
  label: 'Email'
  help: 'We will never share your email with anyone else.'
  error: "Not a valid email address."
code: >-

  <UInput placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid" />
---

#default
:u-input{model-value="benjamincanac" placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid"}
::

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

::callout{icon="i-heroicons-light-bulb"}
  The `error` prop will automatically set the `color` prop of the form element to `red`.
::

## Props

:component-props

## Preset

:component-preset