# Description · HeroUI

> Provides supplementary text for form fields and other components

- Page: https://jiguang132.com/systems/heroui/docs/components/description
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
import { Description } from '@heroui/react';
```

## Usage


> Example `description-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/description


## API

### Description Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS classes |
| `children` | `ReactNode` | - | The content of the description |

## Accessibility

The Description component enhances accessibility by:

- Using semantic HTML that screen readers can identify
- Providing the `slot="description"` attribute for React Aria integration
- 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

```tsx
<div className="flex flex-col gap-1">
  <Label htmlFor="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

```tsx
import {TextField, Label, Input, Description} from '@heroui/react';

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

When using the [TextField](./text-field) component, accessibility attributes are automatically applied to the label and description.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt