Accordion

Accordions display a list of high-level options that can expand to reveal more content. Built on Base UI Accordion for robust accessibility and keyboard navigation.

Built on Accordion

Installation#

npmpnpmyarnbun

npx sugarcoat add accordion

Examples#

Basic Accordion#

Basic

Multiple Open Items#

Allow multiple accordion items to be expanded simultaneously.

Multiple

Default Expanded#

Set which items are expanded by default.

Default Open

Controlled State#

Manage the accordion state programmatically.

Controlled

Disabled Item#

Individual accordion items can be disabled.

Disabled Item

FAQ Example#

A practical FAQ implementation.

FAQ

Anatomy#

The Accordion component consists of several compound parts:

<Accordion>                    {/* Root - manages state */}
  <Accordion.Item value="..."> {/* Individual item container */}
    <Accordion.Header>         {/* Header wrapper (for a11y) */}
      <Accordion.Trigger>      {/* Clickable trigger */}
        Title
        <Accordion.ChevronIcon /> {/* Animated indicator */}
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>          {/* Expandable content */}
      Content here
    </Accordion.Panel>
  </Accordion.Item>
</Accordion>

Usage#

Import

import { Accordion } from "@sugarcoat/ui-nxt";

Usage

<Accordion defaultValue={["item-1"]}>
<Accordion.Item value="item-1">
  <Accordion.Header>
    <Accordion.Trigger>
      Section Title
      <Accordion.ChevronIcon />
    </Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Panel>
    Section content goes here.
  </Accordion.Panel>
</Accordion.Item>
</Accordion>

Props#

Accordion (Root)#

Prop	Type	Default	Description
value	string[]	-	Controlled array of open item values
onValueChange	(value: string[]) => void	-	Callback when open items change
defaultValue	string[]	-	Default open items for uncontrolled usage
disabled	boolean	false	Disable all accordion items
loop	boolean	true	Whether keyboard navigation loops

Accordion.Item#

Prop	Type	Default	Description
valuerequired	string	-	Unique identifier for the item
disabled	boolean	false	Disable this specific item

Accordion.Trigger#

Prop	Type	Default	Description
children	ReactNode	-	Trigger content (text and optional icon)

Accordion.Panel#

Prop	Type	Default	Description
children	ReactNode	-	Expandable panel content

Accessibility#

Keyboard Navigation:
- Enter / Space - Toggle the focused item
- Arrow Down - Move focus to next trigger
- Arrow Up - Move focus to previous trigger
- Home - Move focus to first trigger
- End - Move focus to last trigger
ARIA: Proper role, aria-expanded, aria-controls, and aria-labelledby attributes
Focus Management: Focus remains on trigger after toggle
Screen Readers: State changes are announced automatically