Collapsible
Shows and hides a section with one trigger, such as "Show 3 more" or "Advanced options".Show more
Preview
Code
Ada starred 3 repositories
advui/core
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, Collapsible } from '@advui/core'
<Collapsible>
<Collapsible.Trigger>
<Button variant="ghost">Advanced options</Button>
</Collapsible.Trigger>
<Collapsible.Content>…</Collapsible.Content>
</Collapsible>Examples
Advanced options
Controlled, with a chevron that follows the state.Preview
Code
API reference
Collapsible
The root; accepts layout props such as `gap`.| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial state when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called on toggle. |
disabled | boolean | false | The trigger does nothing and is announced as unavailable. |
Collapsible.Trigger
Wraps one pressable, usually a Button, and adds `aria-expanded` and `aria-controls`.| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactElement | — | The pressable. |
Collapsible.Content
The section. It stays mounted while closed, so text typed inside survives.Accessibility
- The trigger keeps its own role and name, and gets
aria-expandedandaria-controlspointing at the content (the disclosure pattern). - Closed content is hidden from screen readers and the tab order.
- An icon-only trigger needs an
aria-labelthat says what it reveals.
| Key | Action |
|---|---|
| Enter / Space | Toggles the section from the trigger. |
Platform notes
Web
The trigger is whatever element you pass, usually a
<button>.iOS
VoiceOver reads the trigger as expanded or collapsed.
Android
TalkBack reads the trigger as expanded or collapsed.