# Accordion `Accordion` organizes related content into collapsible sections so users can scan dense pages and open the details they need. Keep behavior props on the root so Spar owns the open/closed state model. ## Usage ```tsx import { Accordion } from '@takeoff-ui/react-spar'; ``` ```tsx ``` ## Playground ```tsx function PlaygroundDemo() { return ( Fare conditions Review refund windows, change fees, and cabin rules before confirming the itinerary. Baggage allowance Carry-on, checked baggage, and sports equipment allowances stay grouped in one collapsible panel. Online check-in Use the trigger text as the accessible heading, then place rich content in the content part. ); } render(); ``` ## Multiple Panels ```tsx function MultipleDemo() { return ( Boarding pass Show mobile pass availability, airport counter fallbacks, and printable document rules together. Bag drop Multiple panels can remain open when the workflow asks users to compare related instructions. Security notes Compact mode keeps dense operational guidance scannable without changing the compound anatomy. ); } render(); ``` ## Controlled ```tsx function ControlledAccordionDemo() { const [value, setValue] = useState('documents'); return (
Open panel: {value} Travel documents Controlled state lets app logic decide which passenger task remains expanded. Seat selection Pair value with onValueChange when the open panel should sync with route state, analytics, or form progress.
); } render(); ``` ## Custom Indicator ```tsx function CustomIndicatorDemo() { return ( {({ isOpen }) => (isOpen ? : )} Service options Accordion.Indicator is opt-in. Place it before or after the title to control where the disclosure affordance appears; swap its content via children or the ({'{'} isOpen {'}'}) render prop. {({ isOpen }) => (isOpen ? : )} Support channels Indicators receive the live isOpen state, so each item can flip its own icon without reading the accordion context manually. ); } render(); ``` ## Disabled Item ```tsx function DisabledDemo() { return ( Refundable fares Active items respond to click and keyboard activation as usual. Loyalty upgrades (coming soon) Disabled items render a disabled trigger and ignore both pointer and keyboard activation. ); } render(); ``` ## Without Indicator ```tsx function WithoutIndicatorDemo() { return ( Customer support hours Skip Accordion.Indicator entirely and the trigger ships without a visual affordance — useful when the surrounding layout already telegraphs disclosure. Contact channels Trigger text remains the accessible label and clickable target; the panel still opens via click or Enter/Space. ); } render(); ``` ## Force-Mounted Content ```tsx function ForceMountDemo() { return ( Search-friendly content Use forceMount when in-page search must reach the panel body even when the section is collapsed. Default mounting Without forceMount the panel mounts only while open, keeping the DOM lean. ); } render(); ``` ## Accessibility & Keyboard - Each `Accordion.Trigger` renders a native `