Accordion

Accordion은 콘텐츠를 접을 수 있는 패널로 나눠 표시하는 컴포넌트입니다. 3가지 variant와 3가지 사이즈로 FAQ, 도움말 섹션 등 다양한 용도에 대응합니다.

Variants

Sizes

Expand Mode

Radix

Base

Playground

Preview

A design system is a collection of reusable components and guidelines for building consistent user interfaces.

Variant

Size

Type

Options

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is a design system?</Accordion.Trigger>
    <Accordion.Content>A design system is a collection of reusable components and guidelines for building consistent user interfaces.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>How to install?</Accordion.Trigger>
    <Accordion.Content>Install the package using npm or yarn, then import components as needed.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes, all components follow WAI-ARIA guidelines with full keyboard navigation support.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Variants

default

Content for item 1

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

bordered

Content for item 1

<Accordion variant="bordered" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

splitted

Content for item 1

<Accordion variant="splitted" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</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">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Single 1</Accordion.Trigger>
    <Accordion.Content>Only one open at a time</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Single 2</Accordion.Trigger>
    <Accordion.Content>Previous item closes automatically</Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple

Multiple items can be open

All items open independently

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Multiple 1</Accordion.Trigger>
    <Accordion.Content>Multiple items can be open</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Multiple 2</Accordion.Trigger>
    <Accordion.Content>All items open independently</Accordion.Content>
  </Accordion.Item>
</Accordion>

Collapsible

collapsible이 true(기본값)이면 열려 있는 항목을 클릭해 닫을 수 있습니다. false로 설정하면 항상 하나의 항목이 열린 상태를 유지합니다.

This accordion always keeps one item open.

<Accordion collapsible={false} defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Always one open</Accordion.Trigger>
    <Accordion.Content>This accordion always keeps one item open.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Try closing me</Accordion.Trigger>
    <Accordion.Content>You cannot close all items.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Icon Position

Right (default)

Icon on the right side

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Right icon (default)</Accordion.Trigger>
    <Accordion.Content>Icon on the right side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Left

Icon on the left side

<Accordion iconPosition="left" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Left icon</Accordion.Trigger>
    <Accordion.Content>Icon on the left side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Disabled

This item is active

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is active</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2" disabled>
    <Accordion.Trigger>Disabled item</Accordion.Trigger>
    <Accordion.Content>This item is disabled</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is also active</Accordion.Content>
  </Accordion.Item>
</Accordion>

API

Component Structure

Accordion— Radix Accordion

.ItemProps.TriggerProps.Content

.ItemProps아코디언 항목

.TriggerProps트리거, icon prop 지원

.Content콘텐츠 영역, 애니메이션 포함

Props

Accordion (Root)

type"single"

"single" | "multiple"

확장 모드: single은 하나만, multiple은 여러 항목 동시 가능

collapsibletrue

boolean

모든 항목 닫기 허용 (single 모드 전용)

variant"default"

"default" | "bordered" | "splitted"

시각 스타일

size"default"

"sm" | "default" | "lg"

트리거 및 콘텐츠 사이즈

iconPosition"right"

"left" | "right"

인디케이터 아이콘 위치

defaultValueundefined

string | string[]

기본 확장 항목 (비제어 모드)

valueundefined

string | string[]

확장 중인 항목 (제어 모드)

onValueChangeundefined

(value: string | string[]) => void

확장 상태 변경 시 콜백

disabledundefined

boolean

모든 항목 비활성화

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`	모든 항목 비활성화

Accordion.Item

value—

string

항목의 고유 식별 값 (필수)

disabledundefined

boolean

이 항목 비활성화

Name	Type	Default	Description
`value`	`string`	`—`	항목의 고유 식별 값 (필수)
`disabled`	`boolean`	`undefined`	이 항목 비활성화

Accordion.Trigger

iconbuilt-in SVG (ChevronDown)

ReactNode

커스텀 인디케이터 아이콘

Name	Type	Default	Description
`icon`	`ReactNode`	`built-in SVG (ChevronDown)`	커스텀 인디케이터 아이콘

Customization

Accordion.Trigger의 icon prop으로 인디케이터 아이콘을 자유롭게 변경할 수 있습니다.

Plus / Minus 아이콘

You can return any item within 30 days of purchase.

import { Plus, Minus } from 'lucide-react'

<Accordion.Trigger
  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
</Accordion.Trigger>

ChevronRight (90° 회전)

Follow the installation guide to begin.

import { ChevronRight } from 'lucide-react'

<Accordion.Trigger
  icon={
    <ChevronRight className="icon-sm shrink-0 text-text-muted
      transition-transform duration-normal accordion-chevron" />
  }
>
  Item text
</Accordion.Trigger>

Tip: 커스텀 아이콘에 accordion-chevron 클래스를 추가하면 내장 아이콘과 동일한 180° 회전 애니메이션이 적용됩니다.

Anatomy

Frequently asked questions

Pricing plans

Trigger padding16px

Content padding0 16px 16px

Iconicon-sm

Root

루트 컨테이너

Item

접을 수 있는 섹션

Trigger

헤더 버튼

Chevron

열기/닫기 아이콘

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 항목은 키보드 내비게이션에서 건너뜀

Accordion

Playground

What is a design system?

How to install?

Is it accessible?

Variants

default

Item 1

Item 2

Item 3

bordered

Item 1

Item 2

Item 3

splitted

Item 1

Item 2

Item 3

Sizes

Item A

Item B

Item A

Item B

Item A

Item B

Features

Expand Mode

Single 1

Single 2

Multiple 1

Multiple 2

Collapsible

Always one open

Try closing me

Icon Position

Right icon (default)

Left icon

Disabled

Active item

Disabled item

Active item

API

Component Structure

Props

Accordion (Root)

Accordion.Item

Accordion.Trigger

Customization

Plus / Minus 아이콘

What is your return policy?

Do you offer free shipping?

ChevronRight (90° 회전)

Getting Started

Configuration

Anatomy

Best Practices

권장

지양

Accessibility

키보드 조작

ARIA / WCAG

Related

Tabs

Card

Dropdown