Accordion
Accordion은 콘텐츠를 접을 수 있는 패널로 나눠 표시하는 컴포넌트입니다. 3가지 variant와 3가지 사이즈로 FAQ, 도움말 섹션 등 다양한 용도에 대응합니다.
3
Variants
3
Sizes
2
Expand Mode
Radix
Base
Playground
Preview
D
A design system is a collection of reusable components and guidelines for building consistent user interfaces.
Variant
Size
Type
Options
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>What is a design system?</AccordionTrigger>
<AccordionContent>A design system is a collection of reusable components and guidelines for building consistent user interfaces.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How to install?</AccordionTrigger>
<AccordionContent>Install the package using npm or yarn, then import components as needed.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes, all components follow WAI-ARIA guidelines with full keyboard navigation support.</AccordionContent>
</AccordionItem>
</Accordion>Variants
default
Content for item 1
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>bordered
Content for item 1
<Accordion variant="bordered" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>splitted
Content for item 1
<Accordion variant="splitted" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>Sizes
sm패딩12px 16px
폰트13px
default패딩16px 16px
폰트14px
lg패딩20px 24px
폰트16px
| Size | 패딩 (트리거) | 폰트 | 미리보기 |
|---|---|---|---|
sm | 12px 16px | 13px (text-sm) | Content A |
default | 16px 16px | 14px (text-md) | Content A |
lg | 20px 24px | 16px (text-base) | Content A |
Features
Expand Mode
single은 한 번에 하나만 열리고, multiple은 여러 항목을 동시에 열 수 있습니다.
Single (default)
Only one open at a time
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Single 1</AccordionTrigger>
<AccordionContent>Only one open at a time</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Single 2</AccordionTrigger>
<AccordionContent>Previous item closes automatically</AccordionContent>
</AccordionItem>
</Accordion>Multiple
Multiple items can be open
All items open independently
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Multiple 1</AccordionTrigger>
<AccordionContent>Multiple items can be open</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Multiple 2</AccordionTrigger>
<AccordionContent>All items open independently</AccordionContent>
</AccordionItem>
</Accordion>Collapsible
collapsible이 true(기본값)이면 열려 있는 항목을 클릭해 닫을 수 있습니다. false로 설정하면 항상 하나의 항목이 열린 상태를 유지합니다.
This accordion always keeps one item open.
<Accordion collapsible={false} defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Always one open</AccordionTrigger>
<AccordionContent>This accordion always keeps one item open.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Try closing me</AccordionTrigger>
<AccordionContent>You cannot close all items.</AccordionContent>
</AccordionItem>
</Accordion>Icon Position
Right (default)
Icon on the right side
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Right icon (default)</AccordionTrigger>
<AccordionContent>Icon on the right side</AccordionContent>
</AccordionItem>
</Accordion>Left
Icon on the left side
<Accordion iconPosition="left" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Left icon</AccordionTrigger>
<AccordionContent>Icon on the left side</AccordionContent>
</AccordionItem>
</Accordion>Disabled
This item is active
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Active item</AccordionTrigger>
<AccordionContent>This item is active</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2" disabled>
<AccordionTrigger>Disabled item</AccordionTrigger>
<AccordionContent>This item is disabled</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Active item</AccordionTrigger>
<AccordionContent>This item is also active</AccordionContent>
</AccordionItem>
</Accordion>API
Component Structure
Accordion— Radix Accordion.ItemProps.TriggerProps.Content
.ItemProps아코디언 항목.TriggerProps트리거, icon prop 지원.Content콘텐츠 영역, 애니메이션 포함Props
Accordion (Root)
type"single""single" | "multiple"확장 모드: single은 하나만, multiple은 여러 항목 동시 가능
collapsibletrueboolean모든 항목 닫기 허용 (single 모드 전용)
variant"default""default" | "bordered" | "splitted"시각 스타일
size"default""sm" | "default" | "lg"트리거 및 콘텐츠 사이즈
iconPosition"right""left" | "right"인디케이터 아이콘 위치
defaultValueundefinedstring | string[]기본 확장 항목 (비제어 모드)
valueundefinedstring | string[]확장 중인 항목 (제어 모드)
onValueChangeundefined(value: string | string[]) => void확장 상태 변경 시 콜백
disabledundefinedboolean모든 항목 비활성화
| Name | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | 확장 모드: single은 하나만, multiple은 여러 항목 동시 가능 |
collapsible | boolean | true | 모든 항목 닫기 허용 (single 모드 전용) |
variant | "default" | "bordered" | "splitted" | "default" | 시각 스타일 |
size | "sm" | "default" | "lg" | "default" | 트리거 및 콘텐츠 사이즈 |
iconPosition | "left" | "right" | "right" | 인디케이터 아이콘 위치 |
defaultValue | string | string[] | undefined | 기본 확장 항목 (비제어 모드) |
value | string | string[] | undefined | 확장 중인 항목 (제어 모드) |
onValueChange | (value: string | string[]) => void | undefined | 확장 상태 변경 시 콜백 |
disabled | boolean | undefined | 모든 항목 비활성화 |
AccordionItem
value—string항목의 고유 식별 값 (필수)
disabledundefinedboolean이 항목 비활성화
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | 항목의 고유 식별 값 (필수) |
disabled | boolean | undefined | 이 항목 비활성화 |
AccordionTrigger
iconbuilt-in SVG (ChevronDown)ReactNode커스텀 인디케이터 아이콘
| Name | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | built-in SVG (ChevronDown) | 커스텀 인디케이터 아이콘 |
Customization
AccordionTrigger의 icon prop으로 인디케이터 아이콘을 자유롭게 변경할 수 있습니다.
Plus / Minus 아이콘
You can return any item within 30 days of purchase.
import { Plus, Minus } from 'lucide-react'
<AccordionTrigger
icon={
<>
<Plus className="icon-sm shrink-0 text-text-muted
group-data-[state=open]:hidden" />
<Minus className="icon-sm shrink-0 text-text-muted
hidden group-data-[state=open]:block" />
</>
}
>
Question text
</AccordionTrigger>ChevronRight (90° 회전)
Follow the installation guide to begin.
import { ChevronRight } from 'lucide-react'
<AccordionTrigger
icon={
<ChevronRight className="icon-sm shrink-0 text-text-muted
transition-transform duration-normal accordion-chevron" />
}
>
Item text
</AccordionTrigger>Tip: 커스텀 아이콘에 accordion-chevron 클래스를 추가하면 내장 아이콘과 동일한 180° 회전 애니메이션이 적용됩니다.
Anatomy
1
2
3
Frequently asked questions4
5
Pricing plans
Trigger padding
16pxContent padding
0 16px 16pxIcon
icon-sm1
Root
루트 컨테이너
2
Item
접을 수 있는 섹션
3
Trigger
헤더 버튼
4
Chevron
열기/닫기 아이콘
5
Content
확장된 콘텐츠
Best Practices
✓
권장
- ✓FAQ, 도움말 섹션에 사용
- ✓관련 콘텐츠를 함께 그룹화
- ✓가장 중요한 항목을 기본값으로 펼치기
- ✓라벨은 간결하고 내용을 예측할 수 있게
✕
지양
- ✗아코디언 안에 아코디언 중첩하지 않기
- ✗항상 보여야 할 중요한 정보를 숨기지 않기
- ✗항목을 너무 많이 사용하지 않기 (7개 이하 권장)
- ✗짧은 콘텐츠에 불필요한 접기 사용하지 않기
Accessibility
키보드 조작
Enter / Space포커스된 항목 열기/닫기
Tab다음 포커스 가능 요소로 이동
Arrow Down다음 트리거에 포커스 이동
Arrow Up이전 트리거에 포커스 이동
Home첫 번째 트리거에 포커스 이동
End마지막 트리거에 포커스 이동
ARIA / WCAG
- 콘텐츠에 role="region" + aria-labelledby 적용
- aria-expanded로 트리거 확장 상태 자동 표시
- aria-controls로 트리거와 콘텐츠 연결
- disabled 항목은 키보드 내비게이션에서 건너뜀