Accordion

Collapsible content sections. Wrap multiple AccordionItem children inside an Accordion to create expandable panels.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import {
  Accordion,
  AccordionItem,
  AccordionItemTrigger,
  AccordionItemContent,
} from '@kittl/ui-react';

Usage

Web Component

<kittl-accordion>
  <kittl-accordion-item value="one">
    <kittl-accordion-item-trigger>Section One</kittl-accordion-item-trigger>
    <kittl-accordion-item-content>Content for section one.</kittl-accordion-item-content>
  </kittl-accordion-item>
  <kittl-accordion-item value="two">
    <kittl-accordion-item-trigger>Section Two</kittl-accordion-item-trigger>
    <kittl-accordion-item-content>Content for section two.</kittl-accordion-item-content>
  </kittl-accordion-item>
</kittl-accordion>

React

<Accordion>
  <AccordionItem value="one" onAccordionToggle={(e) => console.log(e.detail)}>
    <AccordionItemTrigger>Section One</AccordionItemTrigger>
    <AccordionItemContent>Content for section one.</AccordionItemContent>
  </AccordionItem>
  <AccordionItem value="two">
    <AccordionItemTrigger>Section Two</AccordionItemTrigger>
    <AccordionItemContent>Content for section two.</AccordionItemContent>
  </AccordionItem>
</Accordion>

Accordion Props

Property	Type	Default	Description
multiple	boolean	false	Allow multiple items open at once

AccordionItem Props

Property	Type	Default	Description
open	boolean	false	Whether the item is expanded
value	string	''	Unique identifier for the item

Events

Event	Detail	Description
accordion-toggle	{ value: string, open: boolean }	Fired when an item is toggled

React prop: onAccordionToggle

Accessibility

• Trigger button has aria-expanded reflecting open state
• Keyboard: Space/Enter on trigger toggles the item