Toggle Group

켜짐/꺼짐 상태를 전환할 수 있는 2상태 버튼 모음입니다.

examples/krds/toggle-group-demo.tsx

import { Bold, Italic, Underline } from "lucide-react"

import {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/toggle-group.json

사용법

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>

구성

다음 조합으로 ToggleGroup:

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

예제

Outline

Use variant="outline" for an outline style.

examples/krds/toggle-group-outline.tsx

import {
  ToggleGroup,
  ToggleGroupItem,

Size

size prop으로 Toggle Group 크기를 변경합니다.

examples/krds/toggle-group-sizes.tsx

import {
  ToggleGroup,
  ToggleGroupItem,

Spacing

Use spacing to add spacing between toggle group items.

examples/krds/toggle-group-spacing.tsx

import {
  ToggleGroup,
  ToggleGroupItem,

Vertical

Use orientation="vertical" for vertical toggle groups.

examples/krds/toggle-group-vertical.tsx

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import {

Disabled

examples/krds/toggle-group-disabled.tsx

import { Bold, Italic, Underline } from "lucide-react"

import {

Custom

A custom toggle group example.

examples/krds/toggle-group-font-weight-selector.tsx

"use client"

import * as React from "react"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/toggle-group-rtl.tsx

"use client"

import {

API 참조

Radix Toggle Group 문서를 참고하세요.

Toggle Tooltip