Accordion

An accordion is a vertically stacked list of interactive items that can be expanded or collapsed. Each item can be expanded or collapsed independently from the others.

Third Party Library

This component uses at least one third party library under the hood. Refer to the library's documentation below for more information on the API.

API Documentation

Import

import { Accordion } from "@aeonkit/react";

Usage

Single

Single accordion allows only one item to be expanded at a time.

Preview

Item 1

Item 2

Item 3

Code

<Accordion type="single">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple

Multiple accordion allows multiple items to be expanded at a time.

Preview

Item 1

Item 2

Item 3

Code

<Accordion type="multiple">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>content</Accordion.Content>
  </Accordion.Item>
</Accordion>

Props

Accordion

API Interface: AccordionProps

Accordion.Content

API Interface: AccordionContentProps

Accordion.Item

API Interface: AccordionItemProps

Accordion.Trigger

API Interface: AccordionTriggerProps