# Description
**Category**: react
**URL**: https://www.heroui.com/docs/react/components/description
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(forms)/description.mdx
> Provides supplementary text for form fields and other components
***
## Import
```tsx
import { Description } from '@heroui/react';
```
## Usage
```tsx
import {Description, Input, Label} from "@heroui/react";
export function Basic() {
return (
We'll never share your email with anyone else.
);
}
```
## Related Components
- **TextField**: Composition-friendly fields with labels and validation
- **Input**: Single-line text input built on React Aria
- **TextArea**: Multiline text input with focus management
## 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
Must be at least 8 characters with one uppercase letter
```
### Integration with TextField
```tsx
import {TextField, Label, Input, Description} from '@heroui/react';
We'll never share your email
```
When using the [TextField](./text-field) component, accessibility attributes are automatically applied to the label and description.