Description

A component for displaying descriptive text associated with form fields or other UI elements.

Import

<script setup lang="ts">
import { Description } from '@heroui-vue/vue'
</script>

Usage

Basic

This is a helpful description for a form field.

<template>
  <Description>This is a helpful description for a form field.</Description>
</template>

<script setup>
import { Description } from '@heroui-vue/vue'
</script>

With Form Field

<template>
  <div>
    <Label for="email">Email</Label>
    <Input id="email" type="email" />
    <Description>
      We'll never share your email with anyone else.
    </Description>
  </div>
</template>

Error State

<template>
  <Description>This field is required.</Description>
</template>

API

Description Props

Prop	Type	Default	Description
variant	'default'	'default'	The description variant

Description Slots

Slot	Description
default	The description content

Accessibility

• Description uses proper semantic HTML
• Automatically linked to form fields via aria-describedby
• Screen reader friendly