Toggle Group

설치 확인

단일·다중 선택 토글 묶음

1. 목적과 출처

단일·다중 선택 토글 묶음

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/toggle-group.tsx
Registry: @adcapsule/toggle-group

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Toggle Group 조합
조합	모양
떨어진 묶음 spacing={2}
붙은 외곽선 묶음 spacing={0}
세로 orientation="vertical"
더보기와 함께

3. 속성 바꿔 보기

고른 값: left

variant

여러 개 선택(multiple)붙여서(spacing 0)

<ToggleGroup variant="outline" spacing={0} value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left" aria-label="왼쪽 정렬"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="가운데 정렬"><AlignCenter /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="오른쪽 정렬"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/toggle-group

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/toggle, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup defaultValue={["left"]} aria-label="정렬">
  <ToggleGroupItem value="left" aria-label="왼쪽"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="오른쪽"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

multiple로 여러 개 선택
spacing(0이면 붙은 묶음)
variant·size는 묶음에서 한 번에
orientation

공통으로 유지할 토큰

Toggle과 같음
radius.md (붙은 묶음 양 끝 6px)

조합

모양

떨어진 묶음 spacing={2}

붙은 외곽선 묶음 spacing={0}

세로 orientation="vertical"

더보기와 함께

3. 속성 바꿔 보기

고른 값: left

variant

여러 개 선택(multiple)붙여서(spacing 0)

<ToggleGroup variant="outline" spacing={0} value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left" aria-label="왼쪽 정렬"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="가운데 정렬"><AlignCenter /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="오른쪽 정렬"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/toggle-group

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/toggle, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup defaultValue={["left"]} aria-label="정렬">
  <ToggleGroupItem value="left" aria-label="왼쪽"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="오른쪽"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿