shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Standard
Inline Trigger Collapsible for React
A question with an up-down chevron at the end of its row that expands to a short answer.
A question and its answer, with the toggle at the end of the row. The whole question is the trigger, and an up-down chevron says it opens and closes. Use it for short FAQs and terms where the answer is a line or two.
Preview
Installation
FAQ
How does the question line up with the icon?
The trigger is flex w-full items-center justify-between gap-4: the question at the start, the icon at the end. shrink-0 keeps the icon its size when the question wraps.
Does ChevronsUpDown rotate?
No. It already points both ways, so it reads right open or closed. It is aria-hidden; the question names the button.
What separates the question and the answer?
Collapsible is a flex flex-col gap-2 column, so the answer sits a step below the question. The answer is text-muted-foreground text-sm.
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 add another question in this layout?
Repeat the Collapsible with new text, in a column with a gap. 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
- Simple CollapsibleA ghost Toggle button with a chevron that
- Collapsible with IconA Show more information trigger with a
- FAQ with Icon CollapsibleAn FAQ question in a bordered box, led by
- Standard Accordion with ChevronA bordered accordion of three questions
- Text-only CollapsibleA Settings heading with a bracketed