Accordion
Vertically stacked, collapsible content panels with optional toggle icon. Renders a styled wrapper around Radix Accordion: pass `title` for the default heade…
Vertically stacked, collapsible content panels with optional toggle icon. Renders a styled wrapper around Radix Accordion: pass title for the default header or compose <AccordionItem>s as children for full control.
import { Accordion } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
title | Required | string | — | — |
isRow | Optional | boolean | undefined | — | — |
isOpened | Optional | boolean | undefined | — | — |
unpadded | Optional | boolean | undefined | — | — |
noBorder | Optional | boolean | undefined | — | — |
showToggleIcon | Optional | boolean | undefined | — | — |
solidBackground | Optional | boolean | undefined | — | — |
customLabel | Optional | React.ReactNode | — | — |
toggleIconPosition | Optional | TAccordionToggleIconPosition | undefined | — | — |
onValueChange | Optional | ((value: string | string[]) => void) | undefined | — | — |
Usage
Collapsible panel with a title trigger and animated content area. Exports both a high-level Accordion wrapper and composable primitives (AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent).
Notes
Accordionwraps the primitives withtype="multiple"and a single hard-coded item value; useAccordionRootdirectly when you need multi-item control.toggleIconPosition="right"swaps toPlusIcon/MinusIconstyle;"left"usesChevronDown/ChevronRight.
Example
/** * Runnable example for Accordion. */import { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger,} from '@tetherto/mdk-react-devkit'export const AccordionExample = () => ( <div className="mdk-example-col"> <Accordion title="Basic Accordion" isOpened> <p>Collapsed/expanded content goes here. Supports any React node as children.</p> </Accordion> <Accordion title="Solid Background" solidBackground> <p>This variant uses a solid background for the accordion panel.</p> </Accordion> <AccordionRoot type="multiple"> <AccordionItem value="item-1"> <AccordionTrigger toggleIconPosition="right">Custom trigger position</AccordionTrigger> <AccordionContent> <p>Content for item 1 using low-level Accordion primitives.</p> </AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger>Another section</AccordionTrigger> <AccordionContent> <p>Content for item 2.</p> </AccordionContent> </AccordionItem> </AccordionRoot> </div>)