Collapsible

An interactive component that expands and collapses content.

Basic Usage

Basic collapsible

@peduarte starred 3 repositories

@radix-ui/primitives

Controlled state

Show settings

CollapsibleExpandable content section

Installation

pnpm add @corew500/ui

Usage

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@mordecai-design-system/ui"

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content to show/hide</CollapsibleContent>
</Collapsible>

Examples

Default Open

<Collapsible defaultOpen>
  <CollapsibleTrigger>Settings</CollapsibleTrigger>
  <CollapsibleContent>
    Expanded by default
  </CollapsibleContent>
</Collapsible>

Controlled

const [open, setOpen] = useState(false)

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>
    {open ? "Hide" : "Show"} details
  </CollapsibleTrigger>
  <CollapsibleContent>
    Controlled content
  </CollapsibleContent>
</Collapsible>

Sub-components

| Component | Description | |-----------|-------------| | Collapsible | Root component managing open state | | CollapsibleTrigger | Button that toggles content visibility | | CollapsibleContent | Content that expands/collapses |

Props

Collapsible

Prop	Type	Default	Description
`open`	enum	—	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
`defaultOpen`	enum	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
`onOpenChange`	(open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void	—	Event handler called when the panel is opened or closed.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Accessibility

CollapsibleTrigger has aria-expanded attribute
Content is hidden from screen readers when collapsed
Keyboard accessible (Enter/Space to toggle)