コンポーネント

トグル

オンまたはオフのいずれかの状態になる2状態ボタン。

import React from 'react';
import * as Toggle from '@radix-ui/react-toggle';
import { FontItalicIcon } from '@radix-ui/react-icons';
import './styles.css';
const ToggleDemo = () => (
<Toggle.Root className="Toggle" aria-label="Toggle italic">
<FontItalicIcon />
</Toggle.Root>
);
export default ToggleDemo;

機能

    フルキーボードナビゲーション。

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

インストール

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

npm install @radix-ui/react-toggle

構成要素

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

import * as Toggle from '@radix-ui/react-toggle';
export default () => <Toggle.Root />;

APIリファレンス

ルート

トグル。

プロパティデフォルト
asChild
ブール値
false
defaultPressed
ブール値
デフォルト値なし
pressed
ブール値
デフォルト値なし
onPressedChange
関数
デフォルト値なし
disabled
ブール値
デフォルト値なし
データ属性
[data-state]"on" |"off"
[data-disabled]

無効の場合に表示されます

アクセシビリティ

キーボード操作

キー説明
スペース
トグルを有効/無効にします。
Enter
トグルを有効/無効にします。