Content / React + CSS
Accordion
Give supporting details room to breathe without overwhelming the page.
Designed to be yours.
What do I need?
Can I use my keyboard?
"use client";
import styles from "./Disclosure.module.css";
export default function Disclosure({
items = [
{
title: "What makes a useful component?",
content:
"Clear states, predictable behavior, and a purpose that fits the product.",
},
],
}) {
return (
<div className={styles.accordion}>
{items.map((item) => (
<details className={styles.item} key={item.title}>
<summary>
{item.title}
<span aria-hidden="true">+</span>
</summary>
<div>{item.content}</div>
</details>
))}
</div>
);
}
Make it yours
Use for supporting explanations and FAQs. Keep essential instructions visible outside the accordion. Multiple items can stay open.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
Disclosure.jsxand the CSS asDisclosure.module.cssin the same folder. - Import
Disclosureand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
items | array | Objects with unique title and content properties. |
Accessibility & behavior
Native details and summary expose expanded state and keyboard activation. Hidden content is removed from keyboard navigation until opened.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.