Accordion
긴 설명을 제목 단위로 펼치고 접습니다.
- 성숙도
- 후보
- 소스 경로
components/ui/accordion.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
제품에서 확인한 문제를 공통 기반으로 정리합니다.
사용할 때
사용 기준
모든 내용을 동시에 볼 필요가 없는 FAQ나 보조 설명에 씁니다.
사용하지 않을 때
핵심 정보나 짧은 본문을 기본으로 숨기지 않습니다.
변형과 상태
closed고정 예시제목만으로 숨은 내용을 예측할 수 있는지 확인합니다.
open고정 예시확장 상태와 캐럿 방향이 함께 바뀌는지 확인합니다.
제품에서 확인한 문제를 공통 기반으로 정리합니다.disabled고정 예시비활성 항목이 초점 순서에서 제외되는지 확인합니다.
제품에서 확인한 문제를 공통 기반으로 정리합니다.
접근성
실제 heading과 button, aria-expanded 관계 및 방향키 이동을 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
type | "single" | "multiple" | 예 | 동시에 열 수 있는 항목 수를 정합니다. |
collapsible | boolean | 아니요 | single 모드에서 모두 닫을 수 있게 합니다. |
value | string | string[] | 아니요 | 제어되는 열린 항목 값입니다. |
사용 예시
지원 importimport {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
<AccordionItem value="one">
<AccordionTrigger>Question</AccordionTrigger>
<AccordionContent>Answer</AccordionContent>
</AccordionItem>
</Accordion>