Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Import

import { Accordion } from '@chimera-ui/components'

Usage

Yes. It adheres to the WAI-ARIA design pattern.

<Accordion.Root
  className="AccordionRoot w-[400px]"
  collapsible
  defaultValue="item-1"
  type="single"
>
  <Accordion.Item
    className="AccordionItem"
    value="item-1"
  >
    <Accordion.Trigger>
      Is it accessible?
    </Accordion.Trigger>
    <Accordion.Content>
      <p>
        Yes. It adheres to the WAI-ARIA design pattern.
      </p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item
    className="AccordionItem"
    value="item-2"
  >
    <Accordion.Trigger>
      Is it unstyled?
    </Accordion.Trigger>
    <Accordion.Content>
      <p>
        Yes. It's unstyled by default, giving you freedom over the look and
        feel.
      </p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item
    className="AccordionItem"
    value="item-3"
  >
    <Accordion.Trigger>
      Can it be animated?
    </Accordion.Trigger>
    <Accordion.Content className="Accordion.Content">
      <div className="AccordionContentText w-full">
        <p>
          Yes! You can animate the Accordion with CSS or JavaScript.
        </p>
      </div>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Accessibility Alert Dialog