القائمة
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
Icon-only button component for actions. Use for toolbars, navigation bars, or compact action buttons without text.
| name | groww-accordion |
| description | Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections. |
import Accordion from '@groww-tech/ui-toolkit/dist/esm/components/atoms/Accordion';
// or
import { Accordion } from '@groww-tech/ui-toolkit';
interface AccordionProps {
isOpen: boolean; // Open/close state (required)
children: React.ReactNode; // Accordion content (required)
header: React.ReactNode; // Header content
onChange?: (isOpen: boolean) => void; // State change handler
className?: string;
duration?: number; // Animation duration (ms)
}
interface AnimateHeightProps {
height?: number | 'auto'; // Height value
duration?: number; // Animation duration
easing?: string; // Easing function
animateOpacity?: boolean; // Animate opacity
id?: string;
className?: string;
}
<Accordion
isOpen={isOpen}
onChange={(open) => setIsOpen(open)}
header={
<div className="accordion-header">
<span>What is Groww?</span>
<Icon name={isOpen ? 'chevron-up' : 'chevron-down'} />
</div>
}
>
<div className="accordion-content">
Groww is an investment platform...
</div>
</Accordion>
{faqs.map((faq, index) => (
<Accordion
key={index}
isOpen={openIndex === index}
onChange={(isOpen) => setOpenIndex(isOpen ? index : -1)}
header={faq.question}
>
{faq.answer}
</Accordion>
))}