shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Faq
FAQ with Icon Collapsible for React
An FAQ question in a bordered box, led by a help icon, with the answer indented under it.
An FAQ question in a bordered box, led by a help icon. The border shifts toward the primary color on hover, the question is a heading that wraps the trigger, and the answer is indented to line up with the question text. Use it for single questions on help and checkout pages.
Preview
Installation
FAQ
What changes the border on hover?
hover:border-primary/50 on Collapsible, which also carries rounded-lg border p-4. The whole box reacts, not just the trigger.
How is the help icon placed?
It leads the trigger: CircleHelpIcon at size-5 in the muted color, nudged down with mt-0.5 to line up with the first line, then gap-3 before the question. It is aria-hidden, so the question alone names the button.
Why does the answer use ms-8?
It's the icon's size-5 plus the gap-3 after it, so the answer starts under the question text. ms follows the page direction.
How do I toggle it from the keyboard?
Tab reaches the trigger, a button named by the question, and Space or Enter toggles the answer.
How do I stack more questions like this?
Repeat the box in a flex flex-col gap-2 list. Each Collapsible opens on its own. When several sit in one list and only one should be open at a time, with arrow keys between the headers, use an Accordion.
Related
- FAQ Item CollapsibleAn FAQ question with a plus that turns
- FAQ Card Style CollapsibleAn FAQ question in a card with a hover
- Numbered FAQ CollapsibleAn FAQ question led by a round number
- Card with Icon Header CollapsibleA card whose header has an icon tile, a
- FAQ with Badge CollapsibleAn FAQ question with a Popular badge and
- Standard Accordion with ChevronA bordered accordion of three questions