Accordion

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

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic Accordion usage, rendered live on the docs site. */
export const AccordionUsage = () => (
  <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	Attribute	Type	Default	Description
multiple	multiple	boolean	false	Allow multiple items open at once

AccordionItem Props

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the item is expanded
value	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