Accordion

Accordions display a list of high-level options that can expand/collapse to reveal more information.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/accordion

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  AccordionRoot, 
  AccordionItem, 
  AccordionHeader, 
  AccordionArrow, 
  AccordionContent,
} from '@melio-ui/accordion';

AccordionRoot: All parts of the accordion are included.
AccordionItem: Includes all parts of the collapsible section.
AccordionHeader: This item switches the expand/collapse state of the accordion item. This item has a titled element.
AccordionArrow: Down arrow icon rotating based on expand/collapse state.
AccordionContent: Contains the collapsible content for an item.

Another way to import

'use client';

import { Accordion } from '@melio-ui/accordion';

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title1</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content1</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>;

'use client' must be used when rendering on the server side.

API Reference

AccordionRoot

All parts of the accordion are included.

Prop	Type	Default	Description
value	`ExpandedValueType`	-	The value of the expanded accordion item.
defaultValue	`ExpandedValueType`	-	The initial value of the expanded accordion item.
toggle	`boolean`	false	accordion item can be collapsed again it or not.
multiple	`boolean`	false	multiple accordion item can be expanded at once or not.
disabled	`boolean`	false	all the accordion item will be disabled or not.
renderMode	`"selecting" \| "selected" \| "force"`	"selecting"	How to render accordion item. selecting: Rendering only the currently expanded accordion item. selected: Rendering accordion items that have been expanded. force: Rendering all accordion items.
onValueChange	`(value: ExpandedValueType) => void`	-	The callback invoked when expanded or collapsed an accordion item.

AccordionItem

Includes all parts of the collapsible section.

Prop	Type	Default	Description
value	`string`	-	The value of the accordion item.
disabled	`boolean`	-	the accordion item will be disabled or not.
children	`React.ReactNode \| ((expanded: boolean) => React.ReactNode)`	-	children of accordion item

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Visible when disabled

AccordionHeader

This item switches the expand/collapse state of the accordion item. This item has a titled element.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Visible when disabled

AccordionContent

Contains the collapsible content for an item.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Visible when disabled

AccordionArrowIcon

Down arrow icon rotating based on expand/collapse state.

Examples

Expanded by defaultValue

const DefaultValue = () => {
  return (
    <Accordion.Root defaultValue="item2">
      <Accordion.Item value="item1">
        <Accordion.Header>
          <div style={{ flex: '1 1 0%' }}>Panel Title1</div>
          <Accordion.ArrowIcon />
        </Accordion.Header>
        <Accordion.Content>Content1</Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="item2">
        <Accordion.Header>
          <div style={{ flex: '1 1 0%' }}>Panel Title2</div>
          <Accordion.ArrowIcon />
        </Accordion.Header>
        <Accordion.Content>Content2</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
};

render(<DefaultValue />);

Alert