ラジオグループ

ラジオボタンと呼ばれるチェック可能なボタンのセットで、一度にチェックできるボタンは1つだけです。

import React from 'react';
import * as RadioGroup from '@radix-ui/react-radio-group';
import './styles.css';

const RadioGroupDemo = () => (
  <form>
    <RadioGroup.Root className="RadioGroupRoot" defaultValue="default" aria-label="View density">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="default" id="r1">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r1">
          Default
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="comfortable" id="r2">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r2">
          Comfortable
        </label>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RadioGroup.Item className="RadioGroupItem" value="compact" id="r3">
          <RadioGroup.Indicator className="RadioGroupIndicator" />
        </RadioGroup.Item>
        <label className="Label" htmlFor="r3">
          Compact
        </label>
      </div>
    </RadioGroup.Root>
  </form>
);

export default RadioGroupDemo;

機能

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

水平/垂直方向に対応。

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

インストール

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

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

構造

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

import * as RadioGroup from '@radix-ui/react-radio-group';

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

APIリファレンス

ルート

ラジオグループのすべてのパーツを含みます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`defaultValue`	`string`	デフォルト値なし
`value`	`string`	デフォルト値なし
`onValueChange`	`function`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`name`	`string`	デフォルト値なし
`required`	`boolean`	デフォルト値なし
`orientation`	`enum`	`未定義`
`dir`	`enum`	デフォルト値なし
`loop`	`boolean`	`true`

データ属性	値
`[data-disabled]`	無効化されている場合に存在

アイテム

グループ内でチェック可能なアイテム。 form 内で使用される場合、イベントが正しく伝播されるように input もレンダリングされます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`value`	`string`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`required`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	無効化されている場合に存在

インジケーター

ラジオアイテムがチェック状態のときにレンダリングされます。この要素を直接スタイルしたり、アイコンを配置するためのラッパーとして使用したり、両方を行うことができます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked"`
`[data-disabled]`	無効化されている場合に存在

アクセシビリティ

ラジオグループ WAI-ARIA デザインパターンに準拠し、ロービングタブインデックスを使用して、ラジオアイテム間のフォーカス移動を管理します。

キーボード操作

キー	説明
`Tab`	フォーカスを選択されているラジオアイテム、またはグループの最初のラジオアイテムに移動します。
`スペース`	フォーカスが選択されていないラジオアイテムにある場合、それを選択します。
`下矢印`	フォーカスを移動し、グループ内の次のラジオアイテムを選択します。
`右矢印`	フォーカスを移動し、グループ内の次のラジオアイテムを選択します。
`上矢印`	フォーカスをグループ内の前のラジオアイテムに移動します。
`左矢印`	フォーカスをグループ内の前のラジオアイテムに移動します。

前へプログレス

次へスクロールエリア

GitHub でこのページを編集する