Accordion

Platform: Web · Desktop only.

Mobile

Accordion은 모바일 primitive로 채택하지 않는다. 좁은 화면에서 접기/펴기 인터랙션은 콘텐츠 위치를 예측 불가하게 만들어 가독성을 해친다. 모바일에서 hierarchical 콘텐츠가 필요하면 다음으로 대체한다:

섹션 헤더 + 항상 펼친 콘텐츠 — 짧은 그룹은 접지 않고 inline 노출. 섹션 라벨은 List의 섹션 헤더 규칙(caption1Medium text-stone-400) 사용
Drilldown navigation — 그룹마다 별도 detail 화면으로 push. 각 그룹의 헤더 row를 Item으로 표현, 우측 chevron으로 드릴다운 표시
BottomSheet drilldown — 모달 컨텍스트라면 Dialog Mobile 내부에서 selection → sub-sheet로 전환

FAQ처럼 자주 토글되는 인터랙션이 정말 필요한 일회성 feature라면 그 화면에 한정해 자체 구현 — design system primitive로 일반화하지 않는다.

Preview

Variants

single — 한 번에 하나만 열림
multiple — 여러 개 동시 열기 허용

States

collapsed · expanded · disabled

Token Mapping

Token	Value	Description
trigger text	`subtitle2Medium` Medium
expanded content	`body1Regular` Regular
divider	`1px solid stone-200`	아이템 간
chevron	16px, `stone-600`	rotate 180deg on open
animation	180ms ease-out	expand/collapse

Usage

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Tiro는 어떤 언어를 지원하나요?</AccordionTrigger>
    <AccordionContent>
      한국어, 영어, 일본어를 포함한 15개 언어를 지원합니다.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>녹음 파일은 어디에 저장되나요?</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

Trigger <button> + aria-expanded
Content role="region" + aria-labelledby
Enter/Space로 토글

Do / Don't

Do: FAQ, settings 그룹에 사용
Don't: 깊이 2단계 이상 중첩 금지
Don't: 중요 정보를 접어두지 말 것 (기본 노출 우선)

Accordion

On this page