토글 그룹

토글 그룹

토글 그룹은 두 가지 상태(on/off)를 갖는 버튼들을 묶어서, 하나의 그룹으로 토글할 수 있게 해주는 컴포넌트예요. 단일 선택 또는 다중 선택 모드를 지원해서, 툴바나 옵션 묶음에 어울리죠. Radix UI의 토글 그룹 프리미티브 위에 만들어져 있어요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 토글 그룹 컴포넌트를 바로 추가할 수 있어요.

npx shadcn@latest add toggle-group

npm install @radix-ui/react-toggle-group

사용하기

토글 그룹 관련 컴포넌트들을 import 하고, type으로 단일/다중 선택을 정해 주세요. ToggleGroupItem에 value를 달아 각 항목을 구분해요.

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

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

예시

기본, 아웃라인, 단일 선택, 작은 크기, 큰 크기, 비활성 등 다양한 변형이 준비되어 있어요.

기본

아웃라인

단일 선택

작게

크게

비활성

더 알아보기 (Learn more)

• Radix UI Toggle Group — 토글 그룹 프리미티브와 API 레퍼런스