typereq- Type
"single" | "multiple"- Default
- -
- Description
- Single: only one item open at a time. Multiple: any number can be open.
Components / Layout
Accordion
விரிவாக்கி
Accordions show and hide sections of content. Use them for FAQs, settings groups, and structured data that can be progressively disclosed.
விரிவாக்கிகள் உள்ளடக்கத்தின் பகுதிகளை காட்டுகின்றன மற்றும் மறைக்கின்றன.
Basic accordion
Component preview
FAQ accordionஅடிக்கடி கேட்கப்படும் கேள்விகள்Multiple open
Component preview
Multiple openபல திறந்தAnatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
AccordionItem
விரிவாக்கி உருப்படிrequired<div>Individual expandable section. Wraps a trigger and content pair. Each item needs a unique 'value' string for state management. Separated by a bottom border (border-b). Groups logically related content — one topic per item.
2
AccordionTrigger
தூண்டிrequired<button>Clickable header that toggles the content panel. Renders as a native <button> for keyboard access (Enter/Space to toggle). Contains the heading text and an animated ChevronDown icon. Applies hover:underline and a focus ring. Text should be a clear, scannable question or label.
3
AccordionContent
உள்ளடக்கம்required<div>Animated reveal panel that slides open/closed. Height animates from 0 to auto using CSS transitions (data-[state=open] / data-[state=closed]). Contains the answer or detailed content. Padding is applied inside the content, not on the wrapper. Supports any content — text, lists, forms, nested components.
4
ChevronDown icon
கீழ் சின்னம்svgVisual indicator of open/closed state. Rotates 180° when the item is expanded. Sized at 16×16px, positioned at the end of the trigger row via ml-auto. Color inherits from muted-foreground. The rotation uses a CSS transition (duration-200) for smooth animation.
API
Props
collapsible- Type
boolean- Default
false- Description
- When type=single, allows closing the open item by clicking it again.
defaultValue- Type
string | string[]- Default
- -
- Description
- Initially open items.
| Prop | Type | Default | Description |
|---|---|---|---|
typereq | "single" | "multiple" | - | Single: only one item open at a time. Multiple: any number can be open. |
collapsible | boolean | false | When type=single, allows closing the open item by clicking it again. |
defaultValue | string | string[] | - | Initially open items. |
Best practices
Use collapsible for single-open mode
ஒரு பிரிவு மட்டும் திறக்க collapsible பயன்படுத்து
Use type='single' with collapsible so only one section is open at a time, reducing cognitive load.
ஒரு நேரத்தில் ஒரே பிரிவு திறந்திருக்க வேண்டும் என்றால் collapsible பயன்படுத்தவும்.
Don't pre-expand all items
அனைத்து பிரிவுகளையும் முன்கூட்டியே திறக்காதே
Pre-expanding all accordion items defeats the purpose of progressive disclosure and overwhelms the user.
அனைத்து பிரிவுகளையும் திறந்து வைப்பது படிப்படியான வெளிப்பாட்டின் நோக்கத்தை முறியடிக்கும்.
Keep trigger text concise
தூண்டி உரையை சுருக்கமாக வைக்கவும்
Write trigger labels as short questions or topic labels — 5 words or fewer — so they are scannable at a glance.
தூண்டி உரையை சுருக்கமாக கேள்வி அல்லது தலைப்பாக எழுதவும்.
Don't write paragraph-length triggers
நீண்ட பத்தி போல் தூண்டி உரை எழுதாதே
Long trigger text is unreadable and breaks the accordion layout on small screens.
நீண்ட தூண்டி உரை சிறிய திரையில் வடிவமைப்பை சிதைக்கும்.