Logo

Accordion

Composable disclosure primitives for progressive reveal content.

Preview

Choose standard, priority, or scheduled delivery at checkout. Available windows update automatically based on the destination and inventory.

Usage

TS 

import { FrAccordionModule } from '@frame-ui-ng/components/accordion';

HTML 

<div frAccordion type="single" collapsible [defaultValue]="'item-1'">
  <section frAccordionItem value="item-1">
    <button frAccordionTrigger type="button">
      <span>Can the trigger include custom content?</span>
      <ng-icon frAccordionIcon name="tablerChevronDown" size="18" />
    </button>

    <div frAccordionContent>
      Yes. Triggers can wrap labels, icons, counters, or other inline elements as long as the button stays clear and readable.
    </div>
  </section>
</div>

Examples

Basic

A single-select accordion with one expanded section by default.

Use an accordion when related details should stay available on the page without overwhelming the default layout.

Multiple

Allow several related sections to remain expanded for side-by-side scanning.

Let people expand related controls together, like density, label visibility, and surface styling options.

Borders

Toggle the border input to switch between separated rows and a lighter, borderless presentation.

Set border to true when each row should read as a distinct setting or when the accordion sits in a dense configuration panel.

Custom Styling

Customize the accordion by scoping design token overrides to a wrapper class. This keeps one-off treatments local while preserving the default component contract everywhere else.

Route urgent issues to chat, send account questions by email, and reserve callbacks for verification-heavy requests.

Token Inspector

Hover the highlighted regions to see which accordion tokens control the trigger, content, border, and icon. Click a region to pin it while you inspect the current token values.

Use an accordion when related details should stay available on the page without overwhelming the default layout.

Design Tokens

Use these CSS custom properties to tune spacing, typography, borders, motion, and icon behavior without changing the component markup. Override them globally for system-wide defaults or locally on a wrapper class for one-off variants.

SCSS 


  --frame-accordion-item-border: var(--frame-border);
  --frame-accordion-item-radius: var(--frame-radius-md);
  --frame-accordion-item-padding-x: 0;
  --frame-accordion-trigger-min-height: 3rem;
  --frame-accordion-trigger-padding-y: 1rem;
  --frame-accordion-trigger-padding-x: 0;
  --frame-accordion-trigger-gap: 1rem;
  --frame-accordion-trigger-color: var(--frame-foreground);
  --frame-accordion-trigger-font-size: 0.9375rem;
  --frame-accordion-trigger-font-weight: 500;
  --frame-accordion-trigger-hover-color: var(--frame-foreground);
  --frame-accordion-trigger-disabled-opacity: 0.55;
  --frame-accordion-content-padding-bottom: 1rem;
  --frame-accordion-content-padding-inline: 0;
  --frame-accordion-content-color: var(--frame-muted-foreground);
  --frame-accordion-content-font-size: 0.875rem;
  --frame-accordion-content-line-height: 1.6;
  --frame-accordion-content-opacity-closed: 0;
  --frame-accordion-content-opacity-open: 1;
  --frame-accordion-content-transition-duration: 220ms;
  --frame-accordion-content-transition-timing: ease;
  --frame-accordion-icon-size: 1rem;
  --frame-accordion-icon-rotation: 180deg;