FormGroup

Form field wrapper with label, description, hint, and error message support. Used by FormFields internally, but can be used standalone for custom form layouts.

Import

import { FormGroup } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage with label
import { FormGroup, Input } from 'vuiii'

<FormGroup label="Email">
  <Input v-model="email" type="email" />
</FormGroup>

More Examples

// With description and hint
<FormGroup
  label="Password"
  description="Choose a strong password for your account"
  hint="Must be at least 8 characters"
>
  <Input v-model="password" type="password" />
</FormGroup>

// With required indicator and validation error
<FormGroup
  label="Username"
  required
  :error="errors.username"
>
  <Input v-model="username" :invalid="!!errors.username" />
</FormGroup>

// With custom label slot
<FormGroup>
  <template #label>
    <span>Email</span>
    <Icon name="info" v-tooltip="'We will never share your email'" />
  </template>
  <Input v-model="email" />
</FormGroup>

Storybook

For interactive examples with all variants, see FormGroup in Storybook.