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 selectionMode="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 * as React from "react"

API リファレンス

React Aria ToggleButtonGroup ドキュメントを参照してください。