---
title: Description
description: Provides supplementary text for form fields and other components
links:
  rac: TextField
  source: description/description.tsx
  styles: description.css
---

## Usage

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

<ComponentPreview
  name="description-basic"
/>

## 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.

## Customization

### Tailwind CSS

<ComponentPreview name="description-custom-styles" />

### Global CSS

To customize the Description component classes, you can use the `@layer components` directive. [Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .description {
    @apply text-muted;
  }
}
```

## Styling Reference

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Description component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/description.css)):

#### Base Classes [!toc]

- `.description` - Base description styles with `muted` text color

## API Reference

### Description

| 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

## Related Components

<RelatedComponents component="description" />
