トグルグループToggleGroupBeta
オン/オフできる二値のボタン群です。
プレビュー
状態とバリエーション
複数選択
書式設定のように、複数の状態を同時にオンにできます。
単一選択
配置や表示モードなど、1つだけ選ぶ操作に使います。
アウトライン
ツールバー内でボタン境界を見せたい場合に使います。
無効化
一時的に操作できない項目はボタンの形を保ち、ツールチップで理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| type | 'single' | 'multiple' | - | 単一選択か複数選択かを指定します。 |
| value / defaultValue | string | string[] | - | 選択中の値です。type に応じて型が変わります。 |
| onValueChange | (value: string | string[]) => void | - | 選択状態が変わった時に呼ばれます。 |
| disabled | boolean | false | グループ全体、または項目ごとに操作を無効化します。理由が必要な場合はツールチップで補足します。 |
| variant | 'default' | 'outline' | 'default' | 各項目の見た目です。枠線を見せたい時は outline を使います。 |
| size | 'default' | 'sm' | 'lg' | 'default' | 各 ToggleGroupItem のサイズです。 |
| ToggleGroupItem.tone | 'default' | 'info' | 'success' | 'warning' | 'destructive' | 'default' | 選択中の色を項目ごとに指定します（状態セグメント：休講→destructive、補講→info、通常→default など）。default は primary。(#288) |
使い方
import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@gunjo/ui";
export function AlignControl() {
const [value, setValue] = React.useState("left");
return (
<ToggleGroup type="single" value={value} onValueChange={(next) => next && setValue(next)}>
<ToggleGroupItem value="left">左</ToggleGroupItem>
<ToggleGroupItem value="center">中央</ToggleGroupItem>
<ToggleGroupItem value="right">右</ToggleGroupItem>
</ToggleGroup>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。