Toggle Group

여러 토글 버튼을 그룹으로 묶어 관리하는 컴포넌트

Single Selection

하나만 선택 가능한 토글 그룹입니다.

tsx

<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight className="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Multiple Selection

여러 개를 선택할 수 있는 토글 그룹입니다.

tsx

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline className="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Variants

두 가지 variant를 제공합니다.

tsx

<ToggleGroup type="single" variant="default">
  ...
</ToggleGroup>
<ToggleGroup type="single" variant="outline">
  ...
</ToggleGroup>

Sizes

세 가지 크기를 제공합니다.

tsx

<ToggleGroup type="single" size="sm">...</ToggleGroup>
<ToggleGroup type="single" size="default">...</ToggleGroup>
<ToggleGroup type="single" size="lg">...</ToggleGroup>

Disabled

개별 항목 또는 전체를 비활성화할 수 있습니다.

tsx

<ToggleGroup type="single" disabled>
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Usage

tsx

import { ToggleGroup, ToggleGroupItem } from '@gpters-internal/ui';
import { AlignLeft, AlignCenter, AlignRight } from 'lucide-react';

function Example() {
  return (
    <ToggleGroup
      type="single"
      defaultValue="center"
      onValueChange={(value) => console.log(value)}
    >
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeft className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenter className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRight className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}