TkxAccordion

import { TkxAccordion, TkxAccordionItem } from 'tekivex-ui';

<TkxAccordion>
  <TkxAccordionItem id="profile" title="Profile settings">
    Edit your name, photo, and bio.
  </TkxAccordionItem>
  <TkxAccordionItem id="notifications" title="Notifications">
    Email + in-app notification preferences.
  </TkxAccordionItem>
  <TkxAccordionItem id="security" title="Security">
    Two-factor, sessions, recovery codes.
  </TkxAccordionItem>
</TkxAccordion>

Single vs multi expand

expandMode="multiple"

Multiple panels open at once.

Useful for FAQ-style listings.

<TkxAccordion expandMode="single">     {/* default — only one panel open at a time */}
<TkxAccordion expandMode="multiple">   {/* multiple panels open simultaneously */}

Default open

<TkxAccordion defaultOpen={['notifications']}>
  {/* notifications panel starts expanded */}
</TkxAccordion>

For controlled mode, pass open + onChange:

const [open, setOpen] = useState<string[]>([]);

<TkxAccordion open={open} onChange={setOpen}>
  {/* … */}
</TkxAccordion>

Custom title slot

Composed title

title accepts any ReactNode, so you can compose icons or counters:

<TkxAccordionItem
  id="messages"
  title={
    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <MessageIcon />
      Messages
      <TkxBadge variant="primary" size="sm">3</TkxBadge>
    </span>
  }
>
  {/* … */}
</TkxAccordionItem>

Accessibility — what’s automatic

Panel triggers are real <button>s with aria-expanded + aria-controls
Each panel has role="region" + aria-labelledby linked to its trigger
Arrow keys move focus between triggers (Up/Down)
Home / End jump to first / last trigger
Disabled items skip during keyboard navigation
Height animation respects prefers-reduced-motion (snap-to-state instead)

Props

TkxAccordion

Prop	Type	Description
`expandMode`	`'single' \| 'multiple'`	Defaults to `single`.
`defaultOpen`	`string[]`	Uncontrolled initially-open ids.
`open`	`string[]`	Controlled open ids.
`onChange`	`(open: string[]) => void`	Open-state change.

TkxAccordionItem

Prop	Type	Required	Description
`id`	`string`	yes	Unique within the accordion.
`title`	`ReactNode`	yes	Trigger content.
`disabled`	`boolean`		Item won’t respond to clicks/keys.

Source

src/components/TkxAccordion.tsx