Docs
トグルグループ

トグルグループ

オンまたはオフにトグルできる、2 つの状態のボタンのセットです。

DocsAPI Reference

インストール

npx shadcn-ui@latest add toggle-group

使用法

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>

例

デフォルト

アウトライン

シングル

スモール

ラージ

無効