Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

stable
since v0.1.0
2.9 kB
disclosure
accordion
accessible

Preview

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Cynosure?</AccordionTrigger>
        <AccordionContent>
          Cynosure is a React component library built with accessibility and design consistency in
          mind. It provides a set of composable, themeable components.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I install it?</AccordionTrigger>
        <AccordionContent>
          Install via npm: <code>npm install @arshad-shah/cynosure-react</code>. Then import
          components from the package and wrap your app with the theme provider.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. All interactive components follow WAI-ARIA patterns and are keyboard navigable with
          proper focus management.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Variants

Multiple open

Use type="multiple" to allow several items to be expanded simultaneously.

Preview

Open

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Accordion type="multiple">
      <AccordionItem value="shipping">
        <AccordionTrigger>Shipping information</AccordionTrigger>
        <AccordionContent>
          We ship worldwide. Standard delivery takes 3–5 business days. Express shipping is
          available at checkout.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Returns & exchanges</AccordionTrigger>
        <AccordionContent>
          Items can be returned within 30 days of delivery for a full refund. Exchanges are
          processed within 5 business days.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="payment">
        <AccordionTrigger>Payment methods</AccordionTrigger>
        <AccordionContent>
          We accept all major credit cards, PayPal, and bank transfer. All transactions are secured
          with 256-bit encryption.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Disabled item

Pass disabled to any AccordionItem to prevent it from being expanded.

Preview

Open

tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Available section</AccordionTrigger>
        <AccordionContent>
          This section is fully interactive and can be expanded or collapsed.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Restricted section</AccordionTrigger>
        <AccordionContent>
          This content is not accessible because the item is disabled.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Another available section</AccordionTrigger>
        <AccordionContent>
          This section is also interactive. Disabled items retain their visual presence but cannot
          be activated.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API

PropTypeDefaultDescription

type*

"single"|"multiple"

—

value

string|string[]

—

defaultValue

string|string[]

—

onValueChange

((value: string) => void) | ((value: string[]) => void)

—

collapsible

boolean

—

Force a non-empty selection in single mode.

disabled

boolean

—

className

string

—

variant

"default"|"contained"|"ghost"

"default"

Visual treatment. `default` shows divider lines, `contained` renders each item as a separate bordered card, `ghost` removes all chrome.

size

"sm"|"md"|"lg"

"md"

Controls trigger padding, font size, and chevron size.

Accessibility

Each AccordionTrigger is a <button> with aria-expanded wired by the component.
The content region carries role="region" and is linked to its trigger via aria-labelledby.
Enter or Space toggles the focused item; Tab moves focus between triggers.
Disabled items carry aria-disabled="true" and are skipped by keyboard navigation.
The chevron icon is aria-hidden="true" — it is purely decorative.

Recipes

Use variant="contained" for a bordered card-style accordion.
Use variant="ghost" for a minimal look without visible borders.
Set collapsible on type="single" to allow the active item to be toggled closed.
Use hideIndicator on AccordionTrigger to remove the built-in chevron when you supply a custom indicator.
Combine with size="lg" for more generous padding in spacious layouts.