Collapsible

An interactive component which expands/collapses a panel. A disclosure pattern that hides or shows additional content.

Preview Code

@peduarte starred 3 repositories

@radix-ui/primitives
@radix-ui/colors
@stitches/react
Interactive

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.
  • Supports controlled and uncontrolled state.
  • Adheres to the Disclosure WAI-ARIA design pattern.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c collapsible

Anatomy

Import all parts and piece them together.

Typescript
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent
} from '@/ui/collapsible';
Html
<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

API Reference

Root

Contains all the parts of a collapsible.

PropTypeDefault
open boolean | undefined —
The controlled open state of the collapsible. Use with (openChange) for controlled mode.
defaultOpen boolean false
The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
disabled boolean false
When true, prevents the user from interacting with the collapsible.
class string —
Additional CSS classes to apply to the root.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled

CSS Variables

VariableDescription
--collapsible-content-widthThe width of the content when it opens/closes
--collapsible-content-heightThe height of the content when it opens/closes

Trigger

The button that toggles the collapsible.

PropTypeDefault
class string —
Additional CSS classes to apply to the trigger.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Content

The component that contains the collapsible content.

PropTypeDefault
forceMount boolean —
Used to force mounting when more control is needed. Useful for animation libraries.
class string —
Additional CSS classes to apply to the content.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled

CSS Variables

VariableDescription
--collapsible-content-widthThe width of the content when it opens/closes
--collapsible-content-heightThe height of the content when it opens/closes

Examples

Basic

A simple collapsible with trigger and content.

Html
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution required.
  </CollapsibleContent>
</Collapsible>

Open by default

Use the defaultOpen prop to have the collapsible open by default.

Html
<Collapsible [defaultOpen]="true">
  <CollapsibleTrigger>Is it accessible?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. It adheres to the WAI-ARIA design pattern.
  </CollapsibleContent>
</Collapsible>

Controlled

Use the open input and openChange output to control the collapsible state.

Html
// In your component class:
isOpen = signal(false);

// In your template:
<Collapsible
  [open]="isOpen()"
  (openChange)="isOpen.set($event)"
>
  <CollapsibleTrigger>Toggle me</CollapsibleTrigger>
  <CollapsibleContent>
    This content is controlled externally.
  </CollapsibleContent>
</Collapsible>

<Button (click)="isOpen.set(!isOpen())">Toggle from outside</Button>

Disabled

Use the disabled prop to disable the collapsible.

Html
<Collapsible [disabled]="true">
  <CollapsibleTrigger>This is disabled</CollapsibleTrigger>
  <CollapsibleContent>
    You cannot interact with this collapsible.
  </CollapsibleContent>
</Collapsible>

With custom trigger

Customize the trigger with your own button or layout.

Html
<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="outline" size="sm">
      <ChevronsUpDown class="h-4 w-4" />
      <span>@peduarte starred 3 repositories</span>
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent class="mt-4">
    <div class="space-y-2">
      <div class="rounded-md border px-4 py-2">
        @radix-ui/primitives
      </div>
      <div class="rounded-md border px-4 py-2">
        @radix-ui/colors
      </div>
      <div class="rounded-md border px-4 py-2">
        @stitches/react
      </div>
    </div>
  </CollapsibleContent>
</Collapsible>

Animating content size

Use the --collapsible-content-height CSS variable to animate the size of the content when it opens/closes.

Html
<Collapsible>
  <CollapsibleTrigger>Animated Content</CollapsibleTrigger>
  <CollapsibleContent class="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
    This content animates smoothly using CSS animations
    and the height CSS variable.
  </CollapsibleContent>
</Collapsible>
Css
/* In your tailwind.config.ts */
animation: {
  'collapsible-down': 'collapsible-down 0.2s ease-out',
  'collapsible-up': 'collapsible-up 0.2s ease-out',
},
keyframes: {
  'collapsible-down': {
    from: { height: '0' },
    to: { height: 'var(--collapsible-content-height)' },
  },
  'collapsible-up': {
    from: { height: 'var(--collapsible-content-height)' },
    to: { height: '0' },
  },
}

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Space Opens/closes the collapsible.
Enter Opens/closes the collapsible.
Tab Moves focus to the next focusable element.
Shift + Tab Moves focus to the previous focusable element.