## Overview [#overview] The **Accordion** component provides an interactive way to display collapsible content sections. Built on Base UI primitives, it supports single or multiple item expansion with customizable variants and smooth CSS transitions. ## Usage [#usage] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` You can sync the accordion state with the URL by providing a `paramName`: ```tsx // Synced with ?sections=faq,privacy FAQ Frequently asked questions... Privacy Policy Our privacy policy details... // Advanced options: console.log("Active sections:", value)} > {/* ... */} ``` ## Examples [#examples] ### Solid [#solid] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; What is Cubitt? Cubitt is a modern React component library built on top of Base UI primitives. ``` ### Outline [#outline] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; What is Cubitt? Cubitt is a modern React component library built on top of Base UI primitives. ``` ### Custom Indicators [#custom-indicators] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; What is Cubitt? Cubitt is a modern React component library built on top of Base UI primitives. Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` ### Multiple Open Items [#multiple-open-items] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; What is Cubitt? Cubitt is a modern React component library. Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` ### Nested Accordions [#nested-accordions] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; Getting Started Follow these steps to get started: Installation Install Cubitt using npm, yarn, or pnpm. Configuration Configure your project with the necessary providers. ``` ### Auto-Play [#auto-play] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionProgress, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; What is Cubitt? Cubitt is a modern React component library built on top of Base UI primitives. Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` ### URL State [#url-state] ```tsx import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, } from "@tilt-legal/cubitt-components/primitives"; // Multiple open sections synced with ?sections=faq (default faq won't show in URL) Frequently Asked Questions Find answers to the most common questions about our service, billing, and features. Privacy Policy Learn how we collect, use, and protect your personal information and data. Terms of Service Review the terms and conditions that govern your use of our platform. ``` ## API Reference [#api-reference] ### Accordion [#accordion] | Prop | Type | Description | | ------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------ | | `value` | `string[]` | The controlled value of the accordion (array of open item values). | | `defaultValue` | `string[]` | The default value when uncontrolled. | | `onValueChange` | `(value: string[], eventDetails) => void` | Callback fired when the value changes. | | `multiple` | `boolean` | Whether multiple items can be open at once. Defaults to `true`. | | `disabled` | `boolean` | Whether the accordion is disabled. Defaults to `false`. | | `hiddenUntilFound` | `boolean` | Allows browser's page search to find and expand panel contents. Defaults to `false`. | | `loop` | `boolean` | Whether to loop keyboard focus back to the first item. Defaults to `true`. | | `orientation` | `"horizontal" \| "vertical"` | The visual orientation of the accordion. Defaults to `"vertical"`. | | `keepMounted` | `boolean` | Whether to keep panels in the DOM while closed. Defaults to `false`. | | `variant` | `"default" \| "outline" \| "solid"` | Visual style variant. Defaults to `"default"`. | | `indicator` | `"arrow" \| "plus" \| "none"` | Icon indicator type. Defaults to `"arrow"`. | | `items` | `string[]` | Ordered list of item values for auto-play cycling. Required when `autoPlay` is true. | | `autoPlay` | `boolean` | Whether to automatically advance to the next item. Defaults to `false`. | | `autoPlayInterval` | `number` | Duration in milliseconds before auto-advancing. Defaults to `5000`. | | `loop` | `boolean` | Whether to loop back to the first item after the last. Defaults to `true`. | | `className` | `string` | Additional CSS classes for the accordion. | | `render` | `ReactElement \| function` | Allows replacing the component's HTML element. | #### URL State Props [#url-state-props] When provided with a `paramName`, the accordion's state will be reflected in the URL. | Prop | Type | Description | | --------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------- | | `paramName` | `string` | URL parameter name for syncing state with URL. When provided, enables URL state management. | | `paramValue` | `string[]` | Controlled value for the URL parameter (syncs with accordion `value`). | | `onUrlValueChange` | `(value: string[] \| null) => void` | Callback when URL parameter value changes. | | `paramClearOnDefault` | `boolean` | Remove URL param when value equals default. Defaults to `true`. | | `paramThrottle` | `number` | Throttle URL updates in milliseconds. | | `paramDebounce` | `number` | Debounce URL updates in milliseconds. | ### AccordionItem [#accordionitem] | Prop | Type | Description | | ----------- | --------- | --------------------------------------------------- | | `value` | `string` | The unique value for this accordion item. Required. | | `disabled` | `boolean` | Whether this item is disabled. | | `className` | `string` | Additional CSS classes for the item. | ### AccordionHeader [#accordionheader] | Prop | Type | Description | | ----------- | -------- | -------------------------------------- | | `className` | `string` | Additional CSS classes for the header. | ### AccordionTrigger [#accordiontrigger] | Prop | Type | Description | | ----------- | -------- | --------------------------------------- | | `className` | `string` | Additional CSS classes for the trigger. | ### AccordionPanel [#accordionpanel] | Prop | Type | Description | | ------------- | --------- | ----------------------------------------------------------------------- | | `className` | `string` | Additional CSS classes for the panel. | | `keepMounted` | `boolean` | Whether to keep the panel in the DOM while closed. Defaults to `false`. | ### AccordionProgress [#accordionprogress] | Prop | Type | Description | | ----------- | -------- | ------------------------------------------------------------------------------------------------- | | `className` | `string` | Additional CSS classes for the progress bar. Only renders when `autoPlay` is enabled on the root. | *** ## Design Guidelines [#design-guidelines] ### Layout & Positioning [#layout--positioning] * Use accordions to organize related information into collapsible sections * Keep trigger labels concise and descriptive * Consider the content hierarchy when nesting accordions * Ensure adequate spacing between items for touch targets ### Visual Hierarchy [#visual-hierarchy] * Use clear visual states for expanded/collapsed items * Provide visual feedback for user interactions * Use indicators to show expandable content * Maintain consistent styling across all accordion items ### Accessibility [#accessibility] * Provide meaningful labels for each accordion trigger * Use proper ARIA attributes for screen readers * Ensure keyboard navigation works correctly * Consider focus management when items expand/collapse