トグルグループ

オンまたはオフに切り替えることができる、2 つの状態を持つボタンのセットです。

import React from 'react';
import * as ToggleGroup from '@radix-ui/react-toggle-group';
import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';
import './styles.css';

const ToggleGroupDemo = () => (
  <ToggleGroup.Root
    className="ToggleGroup"
    type="single"
    defaultValue="center"
    aria-label="Text alignment"
  >
    <ToggleGroup.Item className="ToggleGroupItem" value="left" aria-label="Left aligned">
      <TextAlignLeftIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item className="ToggleGroupItem" value="center" aria-label="Center aligned">
      <TextAlignCenterIcon />
    </ToggleGroup.Item>
    <ToggleGroup.Item className="ToggleGroupItem" value="right" aria-label="Right aligned">
      <TextAlignRightIcon />
    </ToggleGroup.Item>
  </ToggleGroup.Root>
);

export default ToggleGroupDemo;

機能

完全なキーボードナビゲーション。

水平/垂直方向をサポート。

シングルおよび複数の押されたボタンをサポート。

制御可能または非制御可能。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-toggle-group

構成

コンポーネントをインポートします。

import * as ToggleGroup from '@radix-ui/react-toggle-group';

export default () => (
  <ToggleGroup.Root>
    <ToggleGroup.Item />
  </ToggleGroup.Root>
);

API リファレンス

ルート

トグルグループのすべての部分を包含します。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`type*`	`列挙型`	デフォルト値なし
`value`	`文字列`	デフォルト値なし
`defaultValue`	`文字列`	デフォルト値なし
`onValueChange`	`関数`	デフォルト値なし
`value`	`文字列配列`	`[]`
`defaultValue`	`文字列配列`	`[]`
`onValueChange`	`関数`	デフォルト値なし
`disabled`	`ブール値`	`false`
`rovingFocus`	`ブール値`	`true`
`orientation`	`列挙型`	`未定義`
`dir`	`列挙型`	デフォルト値なし
`loop`	`ブール値`	`true`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

アイテム

グループ内のアイテム。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`value*`	`文字列`	デフォルト値なし
`disabled`	`ブール値`	デフォルト値なし

データ属性	値
`[data-state]`	`"on" \|"off"`
`[data-disabled]`	無効になっている場合に表示されます。
`[data-orientation]`	`"vertical" \|"horizontal"`

例

常に値が存在することを確認する

コンポーネントを制御して値を確保できます。

import * as React from 'react';
import * as ToggleGroup from '@radix-ui/react-toggle-group';

export default () => {
  const [value, setValue] = React.useState('left');

  return (
    <ToggleGroup.Root
      type="single"
      value={value}
      onValueChange={(value) => {
        if (value) setValue(value);
      }}
    >
      <ToggleGroup.Item value="left">
        <TextAlignLeftIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center">
        <TextAlignCenterIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right">
        <TextAlignRightIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
};

アクセシビリティ

アイテム間のフォーカス移動を管理するためにロービング tabindex を使用します。

キーボード操作

キー	説明
`Tab`	フォーカスを、押されたアイテムまたはグループの最初のアイテムに移動します。
`Space`	アイテムをアクティブ化/非アクティブ化します。
`Enter`	アイテムをアクティブ化/非アクティブ化します。
`ArrowDown`	フォーカスをグループの次のアイテムに移動します。
`ArrowRight`	フォーカスをグループの次のアイテムに移動します。
`ArrowUp`	フォーカスをグループの前のアイテムに移動します。
`ArrowLeft`	フォーカスをグループの前のアイテムに移動します。
`Home`	フォーカスを最初のアイテムに移動します。
`End`	フォーカスを最後のアイテムに移動します。

前へトグル

次へツールバー

GitHubでこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

トグルグループ

機能