Components
Accordions
Use progressive disclosure to keep supporting information available without overwhelming the main task.
Usage & approach
Native details and summary provide keyboard interaction without JavaScript. Keep essential terms and required actions visible outside collapsed content. Disclosures animate on opening and closing, respecting reduced-motion preferences.
Specifications
- Container
- rounded-lg border border-[#dfe7df]
- Summary
- cursor-pointer p-4 text-sm font-semibold
- Body
- px-4 pb-4 text-base leading-7
- State
- Native open attribute for the initial expanded item.
Coverage questions
Working native disclosure controls with one item expanded initially.
<div class="space-y-3">
<details open class="rounded-lg border border-[#dfe7df] bg-white dark:border-[#3d4140] dark:bg-[#262828]"><summary class="cursor-pointer rounded-md p-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-[#006838] dark:focus-visible:outline-[#006838]">Where do I find my policy details?</summary><p class="px-4 pb-4 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Present the policy reference, coverage dates, and downloadable documents together in the policy overview.</p></details>
<details class="rounded-lg border border-[#dfe7df] bg-white dark:border-[#3d4140] dark:bg-[#262828]"><summary class="cursor-pointer rounded-md p-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-[#006838] dark:focus-visible:outline-[#006838]">How should exclusions be presented?</summary><p class="px-4 pb-4 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Use the approved policy wording from the owning insurer. This library does not define coverage terms.</p></details>
</div>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.