Accordion

Lets users expand or collapse related sections of content on a page

Usage

Use an accordion to organize related content into sections that users can expand or collapse. Each Accordion.Item represents a single section.

import { Accordion, Icon, Text } from "@elemnts-ui/react";

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.ItemTrigger>
      Accordion Title
      <Accordion.ItemIndicator>
        <Icon icon="tabler:chevron-down" />
      </Accordion.ItemIndicator>
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Text p="12">Accordion Content</Text>
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion>;

With icon

Render a custom icon in each accordion item.

Multiple

Set the multiple prop to allow more than one item to be expanded at the same time.

Disabled

Set the disabled prop on any Accordion.Item to make it non-interactive, preventing it from being expanded or collapsed.

API Reference

AccordionRoot

The root component for the accordion.

Prop	Type	Default
collapsible	`boolean`	`false`
defaultValue	`string[]`	-
disabled	`boolean`	`false`
hideMode	`HideMode`	`"display-none"`
id	`string`	-
ids	`Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string }>`	-
lazyMount	`boolean`	`false`
multiple	`boolean`	`false`
orientation	`"horizontal" \| "vertical"`	`"vertical"`
unmountOnExit	`boolean`	`false`
value	`string[]`	-
onFocusChange	`(details: FocusChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
asChild	`boolean`	`false`

AccordionRootProvider

The root provider component for the accordion.

Prop	Type	Default
value	`UseAccordionReturn`	required
hideMode	`HideMode`	`"display-none"`
lazyMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`
asChild	`boolean`	`false`

AccordionItem

The item component for the accordion.

Prop	Type	Default
value	`string`	-
disabled	`boolean`	`false`
asChild	`boolean`	`false`

AccordionItemTrigger

The trigger component for the accordion item.

Prop	Type	Default
asChild	`boolean`	`false`

AccordionItemContent

The content component for the accordion item.

Prop	Type	Default
asChild	`boolean`	`false`

AccordionItemIndicator

The indicator component for the accordion item.

Prop	Type	Default
asChild	`boolean`	`false`