Accordion

The Accordion component shows and hides content behind a clickable title. It animates open and close, rotates its chevron to match, and respects prefers-reduced-motion.

For design guidelines and all interactive states, see the Accordions design page.

import React from "react";
import { Accordion } from "cherry-styled-components";

export default function Page() {
  return (
    <Accordion title="What is Cherry?">
      Cherry is a design system for the modern web.
    </Accordion>
  );
}

The inline variant drops the border, radius, and side padding for embedding inside cards or lists:

<Accordion title="Inline accordion" $inline>
  Content
</Accordion>

By default the accordion manages its own state. Pass open and onToggle to control it from the parent:

<Accordion title="Controlled" open={isOpen} onToggle={setIsOpen}>
  Content
</Accordion>

Properties

All other standard div attributes (className, id, style, aria-*, and so on) are passed through to the root element; the native title and onToggle attributes are replaced by the props above.