Collapsible

An interactive component which expands/collapses a panel.

 import { Component } from '@angular/core';
import {
    RdxCollapsibleContentDirective,
    RdxCollapsibleRootDirective,
    RdxCollapsibleTriggerDirective
} from '@radix-ng/primitives/collapsible';
import { LucideAngularModule, UnfoldVertical, X } from 'lucide-angular';
 
@Component({
    selector: 'collapsible-demo',
    standalone: true,
    imports: [
        RdxCollapsibleRootDirective,
        RdxCollapsibleTriggerDirective,
        RdxCollapsibleContentDirective,
        LucideAngularModule
    ],
    template: `
        <div class="CollapsibleRoot" #collapsibleRoot="collapsibleRoot" [open]="true" rdxCollapsibleRoot>
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1em;">
                <span class="Text" style="color: white;">&#64;peduarte starred 3 repositories</span>
                <button class="IconButton" style="flex-shrink: 0;" rdxCollapsibleTrigger>
                    @if (collapsibleRoot.isOpen()) {
                        <lucide-angular [img]="XIcon" size="16" style="display: flex;" />
                    } @else {
                        <lucide-angular [img]="UnfoldVerticalIcon" size="16" style="display: flex;" />
                    }
                </button>
            </div>
 
            <div class="Repository">
                <span class="Text">&#64;radix-ui/primitives</span>
            </div>
 
            <div rdxCollapsibleContent>
                <div class="Repository">
                    <span class="Text">&#64;radix-ui/colors</span>
                </div>
                <div class="Repository">
                    <span class="Text">&#64;stitches/react</span>
                </div>
            </div>
        </div>
    `,
    styleUrl: 'collapsible-demo.css'
})
export class CollapsibleDemoComponent {
    readonly XIcon = X;
    readonly UnfoldVerticalIcon = UnfoldVertical;
}

 :host {
    button {
        all: unset;
    }
}
 
.CollapsibleRoot {
    width: 100%;
    max-width: 295px;
}
 
.IconButton {
    font-family: inherit;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-11);
    box-shadow: 0 2px 10px var(--black-a7);
}
 
.IconButton[data-state='closed'] {
    background-color: white;
}
 
.IconButton[data-state='open'] {
    background-color: var(--violet-3);
}
 
.IconButton:hover {
    background-color: var(--violet-3);
}
 
.IconButton:focus {
    box-shadow: 0 0 0 2px black;
}
 
.Text {
    color: var(--violet-11);
    font-size: 15px;
    line-height: 25px;
}
 
.Repository {
    background-color: white;
    border-radius: 4px;
    margin: 10px 0;
    padding: 10px;
    box-shadow: 0 2px 10px var(--black-a7);
}

API Reference

Root

Contains all the parts of a collapsible.

Prop	Default	Type
`disabled`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` Determines whether a directive is available for interaction. When true, prevents the user from interacting with the collapsible.
`open`	`false`	`boolean` The controlled open state of the collapsible. Sets the state of the directive. `true` - expanded, `false` - collapsed

Emit	Payload
`onOpenChange`	`[value: boolean]` Emitted with new value when directive state changed. Event handler called when the open state of the collapsible changes.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Trigger

The button that toggles the collapsible.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Content

The component that contains the collapsible content.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern .