スイッチ

ユーザーがチェック済みと未チェックを切り替えることができるコントロールです。

import React from 'react';
import * as Switch from '@radix-ui/react-switch';
import './styles.css';

const SwitchDemo = () => (
  <form>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <label className="Label" htmlFor="airplane-mode" style={{ paddingRight: 15 }}>
        Airplane mode
      </label>
      <Switch.Root className="SwitchRoot" id="airplane-mode">
        <Switch.Thumb className="SwitchThumb" />
      </Switch.Root>
    </div>
  </form>
);

export default SwitchDemo;

特徴

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

制御付きまたは非制御にできます。

インストール

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

npm install @radix-ui/react-switch

構造

すべてのパーツをインポートして組み合わせます。

import * as Switch from '@radix-ui/react-switch';

export default () => (
  <Switch.Root>
    <Switch.Thumb />
  </Switch.Root>
);

API リファレンス

ルート

スイッチのすべてのパーツを含みます。form 内で使用すると、イベントが正しく伝播するようにinputもレンダリングされます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`defaultChecked`	`boolean`	デフォルト値なし
`checked`	`boolean`	デフォルト値なし
`onCheckedChange`	`function`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`required`	`boolean`	デフォルト値なし
`name`	`string`	デフォルト値なし
`value`	`string`	`on`

データ属性	値
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	無効時に存在

サム

スイッチがオンかオフかを視覚的に示すために使用されるサムです。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	無効時に存在

アクセシビリティ

switch ロール要件に準拠しています。

キーボード操作

キー	説明
`Space`	コンポーネントの状態を切り替えます。
`Enter`	コンポーネントの状態を切り替えます。

前へSlider

次へTabs

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

概要

ガイド

コンポーネント

ユーティリティ

スイッチ

特徴

インストール

構造

API リファレンス

ルート

サム

アクセシビリティ

キーボード操作