Accordion

Status: Experimental

Accordion progressively enhances related disclosure regions. Server output keeps all content readable; the browser adds coordinated expansion, relationships, keyboard movement, and state events.

Preview

How does shipping work?+

Orders leave the warehouse within two business days. Tracking appears after the carrier accepts the package.

Can I return an order?+

Unused items may be returned within 30 days using the return link in the order detail.

Archived policy+

This policy is unavailable.

Usage

---
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@freightpx/frasto';
---

<Accordion defaultValue="shipping" collapsible>
  <AccordionItem value="shipping">
    <AccordionTrigger>How does shipping work?</AccordionTrigger>
    <AccordionContent>Orders leave the warehouse within two business days.</AccordionContent>
  </AccordionItem>
</Accordion>

API

Accordion accepts type ("single" or "multiple"), collapsible, defaultValue (string or string[]), and class. Native div attributes pass through.

AccordionItem requires a stable value and accepts disabled and class. AccordionTrigger and AccordionContent accept their native button or div attributes and class.

Behavior and accessibility

• Trigger buttons expose aria-expanded and aria-controls; content regions expose role="region" and aria-labelledby after enhancement.
• Enter and Space retain native button behavior.
• Arrow Down/Up moves between enabled triggers; Home/End moves to the first/last enabled trigger.
• Disabled triggers do not enter the tab order.
• User changes emit bubbling frasto:accordion-change with { value, open, values }.
• In single mode, collapsible controls whether the open item may close. Multiple mode permits independent open items.

Content should remain useful when read in document order. Keep trigger labels concise and do not hide essential actions behind a disabled item.