Layout
Collapsible
Togglable content section with animated expand/collapse. Controlled or uncontrolled.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/collapsible
Examples
Basic
An interactive component which expands/collapses a panel.
File Tree
Use nested collapsibles to build a file tree.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
الطلب #4189
الحالةتم الشحن
Settings Panel
Use a trigger button to reveal additional settings.
Radius
Set the corner radius of the element.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "@codefast/ui/collapsible";
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger asChild>…</CollapsibleTrigger>
<CollapsibleContent>…</CollapsibleContent>
</Collapsible>
API reference
Props for each part of the component. All native element props are also forwarded.
Collapsible
A single togglable region.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Controlled open state and its handler. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| disabled | boolean | false | Prevents toggling. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to the trigger. |
| Space | Toggles the content. |
| Enter | Toggles the content. |
- The trigger exposes aria-expanded and controls the content region.
- For several independent sections, use an Accordion instead.
- Keep the always-visible summary meaningful on its own.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use to hide secondary detail behind a single toggle.
- Show a clear summary of what’s hidden.
Don’t
- Don’t hide content users need at a glance.
- Don’t use for many sections — that’s an Accordion.