@agala-labs/ui

Accordion

Reveals related sections without leaving the current page.

Examples

Default

Install the package and import its styles before mounting the application.

• Register the plugin once.
• Import the shared design tokens.

Override semantic HSL tokens at the root to keep component states consistent.

<AgalaAccordion><AgalaAccordionItem value="billing" title="Billing">…</AgalaAccordionItem></AgalaAccordion>

Import

import { AgalaAccordion, AgalaAccordionItem } from '@agala-labs/ui'

API

Prop	Type	Default	Description
multiple	boolean	false	Allows more than one open item.
value	string	—	Required item identity.
title	string	—	Required item heading.
disabled	boolean	false	Disables an item.
class	string	—	Consumer override class.

Slots

• default — AccordionItem children / item content

Accessibility

Headers are native disclosure buttons linked to labeled regions with expanded and controls relationships. Height and chevron transitions respect reduced motion.