Collapsible

Single-panel disclosure primitive for toggling additional content.

Preview

Order #4189

Product details

StatusShipped

Usage

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrCardModule } from '@frame-ui-ng/components/card';
import { FrCollapsibleModule } from '@frame-ui-ng/components/collapsible';
import { FrInputModule } from '@frame-ui-ng/components/input';

HTML

<section frCollapsible>
  <button frCollapsibleTrigger>Can I use this in my project?</button>
  <div frCollapsibleContent>
    Yes. Free to use for personal and commercial projects.
  </div>
</section>

Examples

Basic

An uncontrolled collapsible that starts open and can be toggled by the trigger.

Order #4189

Product details

StatusShipped

Controlled State

Use open and openChange when the surrounding component owns the expanded state.

Order #4189

Toggle shipping details

Settings Panel

Use a trigger button to reveal additional settings without leaving the page.

Radius XRadius Y

File Tree

Nest collapsibles to build disclosure-based trees and outline panels.

collapsible.tscollapsible.csscollapsible.spec.ts

RTL support

Collapsible uses logical properties, so spacing and nested content adapt in RTL.

الطلب #4189

تفاصيل الشحن

الحالةتم الشحن

Custom Styling

Override collapsible tokens locally to tune trigger spacing, content typography, and reveal motion.

Order #4189

Product details

StatusShipped

Token Inspector

Inspect the collapsible trigger, disclosure content, and animation tokens.

Order #4189

Toggle details

StatusShipped

Design Tokens

Use these CSS custom properties to tune trigger spacing, content typography, and disclosure motion.

SCSS


  --frame-collapsible-trigger-gap: 0.5rem;
  --frame-collapsible-trigger-color: var(--frame-foreground);
  --frame-collapsible-trigger-disabled-opacity: 0.55;
  --frame-collapsible-content-color: var(--frame-muted-foreground);
  --frame-collapsible-content-font-size: 0.875rem;
  --frame-collapsible-content-line-height: 1.6;
  --frame-collapsible-content-padding-block-start: 0.75rem;
  --frame-collapsible-content-transition-duration: 220ms;
  --frame-collapsible-content-transition-timing: ease;