Pantoia Design
Components

Collapsible

사용 예시

목록 그룹 접기

끝난 항목처럼 자주 보지 않는 그룹을 접어 둬요. 펼침 아이콘의 방향으로 접힌 상태를 알려요.

tsx
<Collapsible open={open} onOpenChange={setOpen}>  <CollapsibleTrigger    render={<button type="button" />}    className="text-label flex w-full items-center justify-between py-2"  >    완료한 업무 3    <ChevronDown className={`text-fg-muted size-4 transition-transform ${open ? 'rotate-180' : ''}`} />  </CollapsibleTrigger>  <CollapsibleContent>    <ul className="text-prose flex flex-col">      <li className="text-fg-muted py-1.5">기획안 검토</li>      <li className="text-fg-muted py-1.5">디자인 시안 공유</li>      <li className="text-fg-muted py-1.5">회의록 정리</li>    </ul>  </CollapsibleContent></Collapsible>

모바일 정보 상자 접기

좁은 화면에서 본문을 먼저 보이도록 부가 정보를 접어 둬요.

tsx
<Collapsible className="frame rounded-r12 overflow-hidden">  <CollapsibleTrigger    render={<button type="button" />}    className="group text-label flex w-full items-center justify-between px-4 py-3"  >    업무 정보    <ChevronDown className="text-fg-muted size-4 transition-transform group-data-panel-open:rotate-180" />  </CollapsibleTrigger>  <CollapsibleContent className="border-line text-caption flex flex-col gap-tight border-t px-4 py-3">    <p>담당자 김민아</p>    <p>마감일 2026-10-20</p>  </CollapsibleContent></Collapsible>

처음부터 펴 두기

대부분 바로 봐야 하는 내용이면 defaultOpen으로 펴 두고 접을 수 있게만 해요.

tsx
<Collapsible defaultOpen>  <CollapsibleTrigger render={<Button color="neutral" emphasis="ghost" size="sm" />}>    고급 설정  </CollapsibleTrigger>  <CollapsibleContent className="flex flex-col gap-stack pt-2">    <Field layout="split">      <FieldLabel>검색 결과에 보이기</FieldLabel>      <Switch defaultChecked />    </Field>  </CollapsibleContent></Collapsible>

컨트롤

값false
tsx
<Collapsible open={open} onOpenChange={setOpen}>  <CollapsibleTrigger render={<Button color="neutral" emphasis="outline" size="sm" />}>    받는 사람 더 보기  </CollapsibleTrigger>  <CollapsibleContent className="text-caption text-fg-muted pt-2">    이서준, 박지아, 최하은  </CollapsibleContent></Collapsible>

명세

이름
이름값기본
openboolean-
호출하는 쪽에서 열림 상태를 관리해요.
defaultOpenbooleanfalse
처음에 펴 둘지 정해요.
onOpenChange(open: boolean, eventDetails) => void-
접히거나 펴지면 호출돼요.
disabledbooleanfalse
renderReactElement<button>
CollapsibleTrigger가 그릴 요소예요. aria-expanded와 aria-controls가 붙어요.
classNamestring-
모든 하위 컴포넌트에 쓸 수 있어요. CollapsibleContent에서는 높이 애니메이션 안쪽의 요소에 붙어서 여백은 여기에 줘요.