Description

Provides supplementary text for form fields and other components.

Import

import { Description } from "heroui-solid";

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import { Description, Input, Label } from "heroui-solid"

export function Basic() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="email">Email</Label>
      <Input
        aria-describedby="email-description"
        class="w-64"
        id="email"
        placeholder="you@example.com"
        type="email"
      />
      <Description id="email-description">
        We'll never share your email with anyone else.
      </Description>
    </div>
  )
}

Related Components

• TextField: Composition-friendly fields with labels and validation
• Input: Single-line text input
• TextArea: Multiline text input

Accessibility

The Description component enhances accessibility by:

• Using semantic HTML that screen readers can identify
• Registering itself in the enclosing field's aria-describedby when used inside a TextField
• Supporting proper text contrast ratios

Styling

The Description component uses the following CSS classes:

• .description - Base description styles with muted text color

Examples

With Form Fields

<div class="flex flex-col gap-1">
  <Label for="password">Password</Label>
  <Input id="password" type="password" aria-describedby="password-description" />
  <Description id="password-description">
    Must be at least 8 characters with one uppercase letter
  </Description>
</div>

Integration with TextField

import { TextField, Label, Input, Description } from "heroui-solid";

<TextField>
  <Label>Email</Label>
  <Input placeholder="Enter your email" type="email" />
  <Description>We'll never share your email</Description>
</TextField>

When using the TextField component, accessibility attributes are automatically applied to the label and description.

API

Description Props

Differences from HeroUI React

• Use class instead of className.
• Renders a <div> (Kobalte's default) instead of React Aria's <span> — the .description styles are identical either way.