---
title: "Truncated Description"
description: "Long description that collapses behind a show more toggle"
source: "Equality"
---
import { TruncatedDescription } from "@eqtylab/equality";

## Overview

Truncated Description shows a long block of description text clipped to a maximum length, with a "Show more" / "Show less" toggle to expand and collapse it. Use it to keep cards, list rows, and detail panels compact while still letting users read the full text on demand.

Length is measured against the description's plain text, and the toggle only appears when the text exceeds `maxLength`. The description is rendered as HTML, only pass **trusted** content, since the markup is rendered directly.

## Usage

Import the component:

```tsx
import { TruncatedDescription } from "@eqtylab/equality";
```

Basic usage — `description` is required and defaults to truncating at 120 characters:

```tsx
<TruncatedDescription description={longText} />
```

Set `maxLength` to change the threshold:

```tsx
<TruncatedDescription description={longText} maxLength={300} />
```

## Variants

### Default truncation

<TruncatedDescription
  client:only="react"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna id urna dictum dapibus. Mauris dictum, massa et sagittis tincidunt, risus sem pulvinar libero, ac commodo erat turpis vitae augue. In hac habitasse platea dictumst. Curabitur vel eleifend turpis. Proin quis erat egestas, vulputate diam sed, tempor ex. Suspendisse lacinia turpis vitae eros dictum, at facilisis elit accumsan. Nulla facilisi. Integer posuere, sem eu commodo aliquam, nibh libero cursus nulla, nec euismod nulla dolor ac erat. Sed ultrices, magna nec gravida sagittis, urna lacus cursus massa, ut pretium est diam in nibh."
/>

### Longer preview

<TruncatedDescription
  client:only="react"
  maxLength={480}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet urna id urna dictum dapibus. Mauris dictum, massa et sagittis tincidunt, risus sem pulvinar libero, ac commodo erat turpis vitae augue. In hac habitasse platea dictumst. Curabitur vel eleifend turpis. Proin quis erat egestas, vulputate diam sed, tempor ex. Suspendisse lacinia turpis vitae eros dictum, at facilisis elit accumsan. Nulla facilisi. Integer posuere, sem eu commodo aliquam, nibh libero cursus nulla, nec euismod nulla dolor ac erat. Sed ultrices, magna nec gravida sagittis, urna lacus cursus massa, ut pretium est diam in nibh."
/>

### Usage

```tsx
<TruncatedDescription description={longText} />
<TruncatedDescription description={longText} maxLength={480} />
```

Short descriptions that fall under `maxLength` render in full with no toggle.

## Props

| Name          | Description                                                                    | Type     | Default | Required |
| ------------- | ------------------------------------------------------------------------------ | -------- | ------- | -------- |
| `description` | The description text. May contain trusted HTML, which is rendered as markup.   | `string` | —       | ✅       |
| `maxLength`   | Character threshold (measured on plain text) before truncation and the toggle. | `number` | `120`   | ❌       |
| `className`   | Additional CSS classes applied to the container.                               | `string` | —       | ❌       |