125k

Toggle Group

PreviousNext

オンまたはオフを切り替えられる 2 状態ボタンのセット。

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

import {

インストール

pnpm dlx shadcn@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>

構成

ToggleGroup を構築するには、次の構成を使用します。

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

アウトライン

アウトライン スタイルには variant="outline" を使用します。

import {
  ToggleGroup,
  ToggleGroupItem,

サイズ

トグル グループのサイズを変更するには、size プロパティを使用します。

import {
  ToggleGroup,
  ToggleGroupItem,

間隔

spacing を使用して、トグル グループ項目間にスペースを追加します。

import {
  ToggleGroup,
  ToggleGroupItem,

垂直

垂直トグル グループには orientation="vertical" を使用します。

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

import {

無効

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

import {

カスタム

カスタム トグル グループの例。

フォントの太さを設定するには font-normal を使用します。

"use client"

import * as React from "react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import {

API リファレンス

Radix Toggle Group ドキュメントを参照してください。

変更ログ

2026-05-17 デフォルトの間隔

デフォルトの spacing を 0 から 2 に変更し、デフォルトで項目間にスペースを入れてトグル グループが表示されるようにしました。接続された項目には spacing={0} を使用します。