아코디언
아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현되는 것이다.
사용 지침
안내·자주 묻는 질문(FAQ)·약관 모음처럼 항목 수가 많고 내용이 길 때 사용해 페이지 높이를 줄이고, 단일·다중 펼침 모드를 상황에 맞게 선택합니다.
예제
기본
아코디언 내용 영역입니다. 여기에 다양한 콘텐츠를 넣을 수 있습니다.
라인형
아코디언 내용 영역입니다. 라인형은 배경 채움 없이 구분선으로 아이템을 나눕니다.
단일 선택
아코디언 내용 영역입니다. 여기에 다양한 콘텐츠를 넣을 수 있습니다.
제어 상태
로그인 화면에서 '비밀번호 찾기'를 클릭하고 본인인증을 완료하면 새 비밀번호를 설정할 수 있습니다.
복잡한 콘텐츠 포함
아코디언 내용 영역입니다. 여기에 다양한 콘텐츠를 넣을 수 있습니다.
- 목록 항목 1
- 목록 항목 2
- 목록 항목 3
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| allowMultiple | boolean | true | — |
| aria-label | string | — | Defines a string value that labels the current element. @see aria-labelledby. |
| className | string | — | — |
| id | string | — | — |
| onChange | ((values: string[]) => void) | — | — |
| onClick | MouseEventHandler<HTMLDivElement> | — | — |
| size | enum | large | — |
| style | CSSProperties | — | — |
| tabIndex | number | — | — |
| value | string[] | — | — |
| variant | enum | default | — |