デザインガイドライン

使用法

選択されたアクション

ラジオグループ内では、一度に選択できるオプションは1つだけです。1つのオプションを選択すると、他のオプションは選択解除されます。

ベストプラクティス

ラジオグループは次のようにすべきです：

  • 明確かつ正確にラベル付けされること。
  • クリックまたはタップがアクションをトリガーすることを明確に伝えること。
  • 確立された色を適切に使用すること。 例えば、取り消しが難しいまたは不可能なアクションには赤いボタンのみを使用します。
  • インターフェース内で一貫した位置に配置されること。
  • デフォルトオプションがすでに選択されていること。

状態

アクティブで利用可能なラジオグループ

ラジオグループの状態は、どのオプションがアクティブであるかを明確に示します。ホバーおよびフォーカス状態は、ボタングループ内のボタンの利用可能な選択オプションを表現します。

無効なラジオグループ

選択できないラジオグループには、無効な状態を与えるか、非表示にすることができます。

開発ガイドライン

使用法

制御された

  1. import { useState } from 'react';
  2. import {
  3.    __experimentalRadio as Radio,
  4.    __experimentalRadioGroup as RadioGroup,
  5. } from '@wordpress/components';
  7. const MyControlledRadioRadioGroup = () => {
  8.    const [ checked, setChecked ] = useState( '25' );
  9.    return (
  10.    <RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
  11.    <Radio value="25">25%</Radio>
  12.    <Radio value="50">50%</Radio>
  13.    <Radio value="75">75%</Radio>
  14.    <Radio value="100">100%</Radio>
  15.    </RadioGroup>
  16.    );
  17. };

制御されていない

RadioGroupコンポーネントを制御されていないコンポーネントとして使用する場合、デフォルト値はdefaultCheckedプロパティで設定できます。 

  1. import { useState } from 'react';
  2. import {
  3.    __experimentalRadio as Radio,
  4.    __experimentalRadioGroup as RadioGroup,
  5. } from '@wordpress/components';
  7. const MyUncontrolledRadioRadioGroup = () => {
  8.    return (
  9.    <RadioGroup label="Width" defaultChecked="25">
  10.    <Radio value="25">25%</Radio>
  11.    <Radio value="50">50%</Radio>
  12.    <Radio value="75">75%</Radio>
  13.    <Radio value="100">100%</Radio>
  14.    </RadioGroup>
  15.    );
  16. };

関連コンポーネント

  • 関連するシンプルなボタンには、ButtonGroupコンポーネントを使用します。
  • 従来のラジオオプションには、RadioControlコンポーネントを使用します。