Collapsible

A toggleable content section with line-clamp truncation and smooth show/hide behavior.

Installation

npx vayu-ui init #one time only

npx vayu-ui add collapsible

npx vayu-ui add -t collapsible #with test case needs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

2 Line Clamp

Controlled State

This is a controlled collapsible. The open state is managed externally. You can use the trigger below or the button outside to toggle.

Default Open

This collapsible starts in the open state by default. Click "Show less" to collapse it.

<Collapsible>
  <Collapsible.Content lines={3}>
    Long text content that gets clamped to 3 lines when collapsed.
  </Collapsible.Content>
  <Collapsible.Trigger />
</Collapsible>

<Collapsible>
  <Collapsible.Content lines={2}>
    Shorter clamp with custom trigger labels.
  </Collapsible.Content>
  <Collapsible.Trigger showText="Read more" hideText="Read less" />
</Collapsible>

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <Collapsible.Content lines={2}>
    Controlled collapsible with external state management.
  </Collapsible.Content>
  <Collapsible.Trigger />
</Collapsible>

<Collapsible defaultOpen>
  <Collapsible.Content lines={2}>
    Starts in the open state by default.
  </Collapsible.Content>
  <Collapsible.Trigger />
</Collapsible>

Anatomy

import { Collapsible } from 'vayu-ui';

<Collapsible>
  <Collapsible.Content lines={3}>Your content here.</Collapsible.Content>
  <Collapsible.Trigger />
</Collapsible>;

Collapsible — Root container. Manages open/close state and provides context to children.
Collapsible.Content — Content panel with CSS line-clamp truncation when collapsed. Uses role="region" for accessibility.
Collapsible.Trigger — Button that toggles the content open or closed. Displays customizable label text.

Accessibility

Keyboard Support:
- Enter / Space — Toggle the collapsible open or closed when the trigger is focused.
ARIA Attributes:
- aria-expanded on Collapsible.Trigger reflects the open/closed state.
- aria-controls on Collapsible.Trigger links to the associated content panel.
- aria-labelledby on Collapsible.Content references the controlling trigger.
- role="region" on Collapsible.Content identifies it as a live content region.
Focus Behavior:
- Focus remains on the trigger button after toggling. Content does not steal focus.

When a user navigates to the trigger button, the screen reader announces the button label (e.g., "Show more" or "Show less") along with its expanded or collapsed state via aria-expanded. When expanded, the content panel is announced as a region (role="region") labeled by the trigger. When collapsed, the content is visually truncated with CSS line-clamp but remains in the accessibility tree — the region is still reachable by screen readers navigating by landmarks.

Component Folder Structure

Collapsible/
├── Collapsible.tsx        # Root component with context provider and state management
├── CollapsibleContent.tsx # Content panel with line-clamp truncation
├── CollapsibleTrigger.tsx # Button trigger with aria attributes
├── types.ts               # TypeScript type definitions
├── index.ts               # Re-exports all components and types
└── README.md              # Component usage reference

Props

Collapsible (Root)

Prop	Type	Default	Description
`children`	`ReactNode`	—	`Collapsible.Content` and `Collapsible.Trigger`.
`defaultOpen`	`boolean`	`false`	Start expanded (uncontrolled).
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`className`	`string`	—	Additional CSS classes.

Collapsible.Content

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to display.
`lines`	`number`	`3`	Number of visible lines when collapsed.
`className`	`string`	—	Additional CSS classes.

Collapsible.Trigger

Prop	Type	Default	Description
`showText`	`string`	`"Show more"`	Label when content is collapsed.
`hideText`	`string`	`"Show less"`	Label when content is expanded.
`className`	`string`	—	Additional CSS classes.