Accordion

Effortlessly organize and display your content with rothko ui's Accordion component. Expand and collapse sections to create interactive and space-efficient layouts, perfect for FAQs, collapsible menus, and more.

View Source

Import

Global
Single

import { Accordion, AccordionPanel } from '@rothko-ui/react';

Usage

Example
Code

Label 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Aliquam id diam maecenas ultricies mi eget.

Label 2

Label 3

Variant

Example
Code

Label 1

Label 2

Label 3

Selected

Example
Code

Label 1

Label 2

Label 3

Multiple

Example
Code

Label 1

Label 2

Label 3

Subtitles

Example
Code

Label 1String subtitle

Label 2

ReactElement subtitle

Label 3Massa ultricies mi quis hendrerit dolor magna.

Compact

Example
Code

Label 1

Label 2

Label 3

Icon Override

Example
Code

Label 1

Label 2

Label 3

Props

Accordion Props

Name	Type	Default	Description
Name className	Type `string`	Default	Description CSS class name(s).
Name compact	Type `boolean`	Default `false`	Description If `true`, removes spacing between panels.
Name icon	Type `Icon`	Default	Description Custom icon for accordion state indicators.
Name multiple	Type `boolean`	Default `false`	Description If `true`, multiple panels can be expanded at once.
Name onPanelChange	Type `(isOpen: boolean, panelKey: string) => void`	Default	Description Callback when a panel is opened or closed.
Name selectedKeys	Type `string[]`	Default `[]`	Description The list of selected panels by key.
Name style	Type `CSSProperties`	Default	Description Inline style for the accordion.
Name variant	Type `'bordered' \| 'none'`	Default `'none'`	Description Specifies the variant of the accordion.

AccordionPanel Props

Name	Type	Default	Description
Name $key	Type `string`	Default	Description The key for the panel.
Name className	Type `string`	Default	Description CSS class name(s).
Name classNames	Type `Object<StyleableComponents, string>`	Default	Description CSS class name(s) for the panel components.
Name disabled	Type `boolean`	Default `false`	Description The inline styles for the panel components.
Name icon	Type `Icon`	Default	Description The icon for the panel.
Name onClick	Type `(e: MouseEvent) => void`	Default	Description Event handler for the click event on the panel..
Name onKeyDown	Type `(e: KeyboardEvent) => void`	Default	Description Event handler for the keydown event on the panel.
Name style	Type `CSSProperties`	Default	Description The inline style for the panel.
Name styles	Type `Object<StyleableComponents, React.CSSProperties>`	Default	Description The inline styles for the panel components.
Name subtitle	Type `ReactNode`	Default	Description The subtitle of the panel.
Name title	Type `ReactNode`	Default	Description The title of the panel.