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.
Usage
import { Accordion, AccordionPanel } from '@rothko-ui/ui';
- Example
- Code
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.
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.
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.
Bordered
- Example
- Code
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.
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.
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.
Selected
- Example
- Code
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.
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.
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.
Multiple
- Example
- Code
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.
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.
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.
Subtitles
- Example
- Code
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.
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.
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.
Compact
- Example
- Code
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.
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.
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.
Icon Override
- Example
- Code
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.
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.
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.
With Kind
- Example
- Code
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.
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.
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.
danger
info
primary
secondary
success
warning
Props
Accordion Props
Name | Type | Default | Description |
---|---|---|---|
Name bordered | Type boolean | Default false | Description If `true`, borders are added around each accordion item. Default is `false`. |
Name className | Type string | Default | Description CSS class name for custom styling. |
Name compact | Type boolean | Default false | Description Adds spacing around items for better separation. Default is `false`. |
Name icon | Type Icon | Default | Description Custom icons for accordion state indicators. |
Name id | Type string | Default | Description Unique identifier for the accordion. |
Name kind | Type RothkoKind | Default | Description Specifies the accordion's style kind. |
Name multiple | Type boolean | Default false | Description If `true`, multiple accordion items can be open at the same time. Default is `false`. |
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 styles for the accordion. |
AccordionPanel Props
Name | Type | Default | Description |
---|---|---|---|
Name $key | Type string | Default | Description The key for the AccordionPanel. |
Name className | Type string | Default | Description The class name for the AccordionPanel. |
Name contentClassName | Type string | Default | Description The class name for the content of the AccordionPanel. |
Name contentStyle | Type CSSProperties | Default | Description The inline style for the content of the AccordionPanel. |
Name disabled | Type boolean | Default false | Description Determines if the AccordionPanel is disabled. |
Name icon | Type Icon | Default | Description The icon for the AccordionPanel. |
Name id | Type string | Default | Description Unique identifier for the accordion panel. |
Name labelClassName | Type string | Default | Description The class name for the label of the AccordionPanel. |
Name labelStyle | Type CSSProperties | Default | Description The inline style for the label of the AccordionPanel. |
Name onClick | Type (e: React.MouseEvent<HTMLButtonElement>) => void | Default | Description Event handler for the click event on the AccordionPanel. |
Name onKeyDown | Type (e: React.KeyboardEvent<HTMLButtonElement>) => void | Default | Description Event handler for the keydown event on the AccordionPanel. |
Name style | Type CSSProperties | Default | Description The inline style for the AccordionPanel. |
Name subtitle | Type React.ReactNode | Default | Description The subtitle of the AccordionPanel. |
Name title | Type React.ReactNode | Default | Description The title of the AccordionPanel. |