Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Collapsible

Single-panel disclosure primitive for toggling additional content.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

TS 

import { FrBadgeModule } from '@frame-ui-ng/components/badge';
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 type="button">
    <span>Can I use this in my project?</span>
    <ng-icon name="tablerChevronDown" size="18" />
  </button>
  <div frCollapsibleContent>
    Yes. Use collapsible when a short answer or supporting details should stay one click away.
  </div>
</section>

03 Examples

Basic

A compact disclosure row for short answers and supporting details.

Component Sheet

Grid: 8px · Scale: 1:1

Controlled State

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

Component Sheet

Grid: 8px · Scale: 1:1

Support handoff

Escalate checkout issue

Disabled

Disable the root when the disclosure should stay visible but not interactive.

Component Sheet

Grid: 8px · Scale: 1:1

Settings Panel

Reveal advanced controls without making the default form feel heavy.

Component Sheet

Grid: 8px · Scale: 1:1

Metadata card

Use a collapsible card when secondary metadata should stay available but quiet.

Component Sheet

Grid: 8px · Scale: 1:1

Environment
Production
Owner
Platform team
Status
Ready

RTL support

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

Component Sheet

Grid: 8px · Scale: 1:1

نعم، تستخدم المسافات خصائص منطقية حتى تتكيف مع اتجاه النص.

04 Custom Styling

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

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

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

Yes. Keep the content concise and use the controlled API when the surrounding view owns the disclosure state.

06 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-open-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;