Form Group

FormGroup wraps a form field with a label, optional required indicator, error message, and hint text. It is designed to be the consistent outer wrapper for Input, Textarea, and any other form control.

ExamplesCodeUsageChangelog

Basic usage

Email address

Tailwind v4

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

Required indicator

Full name *

Tailwind v4

<FormGroup label="Name" for="name" required>
  <Input id="name" v-model="name" />
</FormGroup>

The required prop adds a red asterisk (*) after the label text.

Error message

Password

Password must be at least 8 characters

Tailwind v4

<FormGroup label="Password" for="password" :error="errors.password">
  <Input id="password" v-model="password" type="password" />
</FormGroup>

The error is rendered in text-danger below the input slot.

Hint text

Username

Only letters, numbers, and underscores.

Tailwind v4

<FormGroup label="Username" for="username" hint="Only letters, numbers, and underscores.">
  <Input id="username" v-model="username" />
</FormGroup>

If both error and hint are provided, only the error is shown.

Full form example

<form @submit.prevent="submit">
  <div class="space-y-4">
    <FormGroup label="Full name" for="name" required :error="errors.name">
      <Input id="name" v-model="form.name" />
    </FormGroup>

    <FormGroup label="Email" for="email" required :error="errors.email">
      <Input id="email" v-model="form.email" type="email" />
    </FormGroup>

    <FormGroup label="Notes" for="notes" hint="Optional">
      <Textarea id="notes" v-model="form.notes" />
    </FormGroup>
  </div>

  <div class="mt-6 flex gap-3 justify-end">
    <Button variant="secondary" type="button" @click="cancel">Cancel</Button>
    <Button type="submit" :loading="saving">Save</Button>
  </div>
</form>

Props

Prop	Type	Default	Description
label	string	—	Label text rendered above the slot
for	string	—	for attribute on the <label> — should match the input's id
required	boolean	false	Shows a red * after the label
error	string	—	Error text shown below the slot in text-danger
hint	string	—	Hint text shown below the slot in text-ink-muted

Slots

Slot	Description
default	The form control (input, textarea, select, etc.)