Skip to main content

Accordion

Accordion is a lightweight, animated disclosure panel. It shows a title with a chevron and reveals its children when expanded, using a smooth height transition. It works in every SpartanFX target (SPFx, PCF, Code Apps, standalone React) with no host context.

When to use​

  • Progressive disclosure — hide secondary detail behind a title the user can expand.
  • FAQ-style lists, "advanced settings" sections, or long forms broken into collapsible groups.
  • A titled, non-collapsible section (use staticMode) when you want the accordion's framing without the toggle.

Reach for something else when you need tabs (mutually exclusive panels) or a full side panel — those aren't disclosure patterns.

Import​

import { Accordion } from '@spartanfx/react';

Basic usage​

The only required prop is title. The accordion starts collapsed.

<Accordion title="Shipping details">
  Ships in 2–3 business days. Free returns within 30 days.
</Accordion>

Start expanded​

Pass defaultOpen to render it open on first paint.

<Accordion title="What is SpartanFX?" defaultOpen>
  A React + TypeScript component library that runs across SPFx, PCF,
  Power Apps Code Apps, and standalone React.
</Accordion>

Static section​

staticMode keeps the accordion's styling but removes the expand/collapse toggle — a titled frame that's always open. (It ignores defaultOpen.)

<Accordion title="Summary" staticMode>
  This content is always visible, wrapped in the accordion's frame.
</Accordion>

Theming​

Accordion honors dark mode through the appearance prop and can be themed with design tokens or class overrides:

import { AppearanceMode } from '@spartanfx/react';

<Accordion title="Dark panel" appearance={AppearanceMode.dark}>
  Themed for a dark surface.
</Accordion>
  • tokens — design tokens (CSS custom properties) via IAccordionTokens.
  • classes — per-element class overrides via IAccordionClassNames.
  • className / style — root element overrides.

Props​

PropTypeDefaultNotes
title (required)string—Text shown next to the chevron.
defaultOpenbooleanfalseStart expanded.
staticModebooleanfalseNon-collapsible titled section.
appearanceAppearanceModelightLight or dark theming.
ariaLabelstring—Accessible label.

See the full generated reference: Accordion API ↗.

See also​