Components / Collapsible
Collapsible
Single-section disclosure with smooth grid-template-rows animation. Card or flush variants in three sizes. Lighter than accordion.
data-display v0.7.0
Playground
Examples
Basic (md card)
Additional configuration goes here. This content is revealed with a smooth animation when the trigger is clicked.
<cg-collapsible><span slot="trigger">Show advanced options</span><div>Additional configuration goes here. This content is revealed with a smooth animation when the trigger is clicked.</div></cg-collapsible>Open by default
Run pnpm add @cognivo/components and import in your app.
<cg-collapsible open><span slot="trigger">FAQ: How do I install?</span><p style="margin:0;">Run <code>pnpm add @cognivo/components</code> and import in your app.</p></cg-collapsible>Sizes (sm / md / lg)
Compact disclosure for dense layouts.
The standard size for most contexts.
Roomy disclosure for primary content sections.
<div style="display:flex;flex-direction:column;gap:12px;"><cg-collapsible size="sm"><span slot="trigger">Small</span><div>Compact disclosure for dense layouts.</div></cg-collapsible><cg-collapsible size="md" open><span slot="trigger">Medium (default)</span><div>The standard size for most contexts.</div></cg-collapsible><cg-collapsible size="lg"><span slot="trigger">Large</span><div>Roomy disclosure for primary content sections.</div></cg-collapsible></div>Flush variant
An AI-native component library with cognitive bias analysis built in.
Override Tier-2 semantic tokens — every component re-skins automatically.
Yes — keyboard, ARIA, focus rings, and reduced-motion support across all 183 components.
<div style="display:flex;flex-direction:column;gap:8px;"><cg-collapsible variant="flush"><span slot="trigger">What is Cognivo?</span><div>An AI-native component library with cognitive bias analysis built in.</div></cg-collapsible><cg-collapsible variant="flush"><span slot="trigger">How does theming work?</span><div>Override Tier-2 semantic tokens — every component re-skins automatically.</div></cg-collapsible><cg-collapsible variant="flush"><span slot="trigger">Is it accessible?</span><div>Yes — keyboard, ARIA, focus rings, and reduced-motion support across all 183 components.</div></cg-collapsible></div>Disabled
Cannot be opened.
<cg-collapsible disabled><span slot="trigger">Locked section</span><div>Cannot be opened.</div></cg-collapsible>Import
import { CgCollapsible } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-collapsible';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
disabled | boolean | false | Disabled state |
size | "sm" | "md" | "lg" | "md" | Size — drives padding and font-size |
variant | "card" | "flush" | "card" | Visual style — bordered card or chrome-less flush |
Events
| Event | Detail | Description |
|---|---|---|
cg-collapsible-toggle | {open: boolean} | Toggled |