Pantoia Design
Components

ToggleGroup

사용 예시

하나 고르기

multiple 없이 쓰면 하나만 골라요. 고른 항목을 다시 눌러도 고르기가 풀리지 않아요.

tsx
<ToggleGroup value={priority} onValueChange={setPriority} aria-label="우선순위">  <ToggleGroupItem value="low">낮음</ToggleGroupItem>  <ToggleGroupItem value="normal">보통</ToggleGroupItem>  <ToggleGroupItem value="urgent" color="danger">긴급</ToggleGroupItem></ToggleGroup>

여럿 고르기

반복 요일처럼 여러 값을 함께 고를 때 multiple을 적어요.

tsx
<ToggleGroup multiple value={days} onValueChange={setDays} shape="circle" aria-label="반복 요일">  {DAYS.map(day => (    <ToggleGroupItem key={day.value} value={day.value}>{day.label}</ToggleGroupItem>  ))}</ToggleGroup>

목록 필터

여러 조건을 함께 적용하는 필터를 한 값으로 관리할 때 써요.

tsx
<ToggleGroup multiple value={filters} onValueChange={setFilters} aria-label="상품 필터">  <ToggleGroupItem value="free-shipping">무료배송</ToggleGroupItem>  <ToggleGroupItem value="same-day">당일출발</ToggleGroupItem>  <ToggleGroupItem value="discount">할인중</ToggleGroupItem>  <ToggleGroupItem value="in-stock">재고있음</ToggleGroupItem></ToggleGroup>

SegmentedControl과 구분

Toggle 여러 개와 구분

아이콘

아이콘만 쓰면 shape를 square나 circle로 두고 항목마다 aria-label을 적어요.

tsx
<ToggleGroup defaultValue="left" shape="square" aria-label="정렬">  <ToggleGroupItem value="left" aria-label="왼쪽 정렬"><AlignLeft /></ToggleGroupItem>  <ToggleGroupItem value="center" aria-label="가운데 정렬"><AlignCenter /></ToggleGroupItem>  <ToggleGroupItem value="right" aria-label="오른쪽 정렬"><AlignRight /></ToggleGroupItem></ToggleGroup>

항목 색

고른 값에 의미가 있으면 그 항목에만 color를 적어요.

tsx
<ToggleGroup defaultValue="urgent" aria-label="라벨">  <ToggleGroupItem value="normal">보통</ToggleGroupItem>  <ToggleGroupItem value="recommended" color="brand">추천</ToggleGroupItem>  <ToggleGroupItem value="info" color="info">정보</ToggleGroupItem>  <ToggleGroupItem value="done" color="success">완료</ToggleGroupItem>  <ToggleGroupItem value="caution" color="warning">주의</ToggleGroupItem>  <ToggleGroupItem value="urgent" color="danger">긴급</ToggleGroupItem></ToggleGroup>

배경에 따라

행은 ToggleGroup을 두는 배경, 열은 surface 값이에요.

barewellpanel
bg
well
panel
tsx
<div className="bg-bg-well rounded-r8 p-3">  <ToggleGroup surface="panel" defaultValue="normal" aria-label="우선순위">    <ToggleGroupItem value="low">낮음</ToggleGroupItem>    <ToggleGroupItem value="normal">보통</ToggleGroupItem>  </ToggleGroup></div>

비활성

지금 고를 수 없는 항목만 막거나, ToggleGroup 전체를 막아요.

항목 하나

전체

tsx
<ToggleGroup defaultValue="normal" aria-label="우선순위">  <ToggleGroupItem value="low">낮음</ToggleGroupItem>  <ToggleGroupItem value="normal">보통</ToggleGroupItem>  <ToggleGroupItem value="urgent" color="danger" disabled>긴급</ToggleGroupItem></ToggleGroup><ToggleGroup multiple disabled defaultValue={['mon']} shape="circle" aria-label="반복 요일">  …</ToggleGroup>

유형

크기와 모양

행은 shape, 열은 size예요.

pill

circle

square

tsx
<ToggleGroup size="md" shape="pill" defaultValue="week" aria-label="기간">…</ToggleGroup><ToggleGroup size="md" shape="circle" defaultValue="mon" aria-label="요일">…</ToggleGroup><ToggleGroup size="md" shape="square" defaultValue="left" aria-label="정렬">…</ToggleGroup>

컨트롤

값"normal"
tsx
<ToggleGroup value={priority} onValueChange={setPriority} aria-label="우선순위">  <ToggleGroupItem value="low">낮음</ToggleGroupItem>  <ToggleGroupItem value="normal">보통</ToggleGroupItem>  <ToggleGroupItem value="urgent" color="danger">긴급</ToggleGroupItem></ToggleGroup>

명세

이름
이름값기본
ToggleGroup
multiplebooleanfalse
여러 개를 고를 때 적어요. 값의 타입이 string[]로 바뀌어요.
valuestring | null, string[]-
호출하는 쪽에서 고른 값을 관리해요. multiple이면 배열이에요.
defaultValuestring | null, string[]null, []
처음에 고를 값이에요.
onValueChange(value, eventDetails) => void-
고른 값이 바뀌면 호출돼요. value는 하나만 고르면 string | null, multiple이면 고른 값 전체를 담은 string[]이에요.
sizesm, md, lgsm
높이는 sm h-8, md h-9, lg h-10이에요. 같은 크기의 Button과 높이가 같아요.
shapepill, circle, squarepill
circle과 square는 너비가 높이와 같아서 글자 한두 자나 아이콘만 둘 때 써요.
surfacebare, well, panelbare
꺼진 항목의 배경이에요. Toggle과 같은 값이에요.
disabledbooleanfalse
모든 항목을 비활성으로 만들어요.
aria-labelstring-
무엇을 고르는지 적어요. 화면에 보이는 제목이 없을 때 꼭 적어요.
classNamestring-
ToggleGroupItem에도 쓸 수 있어요. 항목 사이 간격은 8px이고 넘치면 다음 줄로 넘어가요.
ToggleGroupItem
valuestring-
이 항목을 고르면 넘어가는 값이에요.
colorneutral, brand, info, success, warning, dangerneutral
고른 상태의 색이에요. neutral은 solid, 나머지는 weak 배경과 글자색이에요.
disabledbooleanfalse
aria-labelstring-
아이콘만 쓰면 꼭 적어요.