Accordion
An accordion component that allows users to expand and collapse content sections.
<Accordion size="lg" variant="light" iconAlignment="trailing" label="How do I reset my password?" defaultExpanded> <p>To reset your password, click "Forgot password?" on the login page...</p></Accordion>Installation
npx sdaia-ui@latest add accordion
Usage
import { Accordion } from "@/components/ui/accordion"1<Accordion2variant="light"3defaultExpanded4label={isRtl ? 'ما هي الهيئة السعودية للبيانات والذكاء الاصطناعي؟' : 'What is SDAIA?'}5>6{isRtl ? 'تأسست الهيئة السعودية للبيانات والذكاء الاصطناعي (سدايا) لقيادة مبادرات البيانات والذكاء الاصطناعي في المملكة دعمًا لرؤية 2030.' : 'The Saudi Data and Artificial Intelligence Authority (SDAIA) was established to drive data and AI initiatives across the Kingdom in support of Vision 2030.'}7</Accordion>
Examples
Default
The default Light accordion style.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionDefault() {Block
Use `style="Block"` for strong visual separation between panels.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionBlock() {Large
Use `size="Large"` for spacious layouts and primary navigation.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionLarge() {Medium
Use `size="Medium"` for the default density. This is the default.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionMedium() {Small
Use `size="Small"` for compact panels and sidebars.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionSmall() {Disabled
Use `state="Disabled"` to prevent the panel from expanding.
'use client'; import { Accordion } from 'sdaia-ui'; export default function AccordionDisabled() {API Reference
AccordionProps
Props for the Accordion component.
Prop | Type | Default | Required |
|---|---|---|---|
direction | 'ltr' | 'rtl' | 'ltr' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
variant | 'light' | 'light-compact' | 'block' | 'light' | optional |
state | 'default' | 'hovered' | 'pressed' | 'focused' | 'disabled' | - | optional |
iconAlignment | 'trailing' | 'leading' | 'trailing' | optional |
label | ReactNode | 'Accordion title' | optional |
expanded | boolean | - | optional |
defaultExpanded | boolean | false | optional |
disabled | boolean | false | optional |
onExpandedChange | (expanded: boolean) => void | - | optional |
preserveContentSpaceWhenCollapsed | boolean | false | optional |