デザインガイドライン

使用法

ラジオボタンを使用するタイミング

ユーザーに次のことを望む場合は、ラジオボタンを使用してください：

  • リストから単一のオプションを選択する。
  • 利用可能なすべてのオプションを表示する。

折りたたむことができる利用可能なオプションのリストがある場合は、ドロップダウンメニューを使用することを検討してください。ドロップダウンはスペースを節約します。たとえば、国の選択フィールドは、ラジオボタンのグループとしては非常に大きくなり、すべてのオプションを一度に見ることでユーザーがより多くのコンテキストを得るのには役立ちません。

すること

![右: \

しないこと

![間違い: \

デフォルト

ラジオボタンを使用する場合、1つはデフォルトで選択されるべきです（つまり、ページが読み込まれたとき、ウェブアプリケーションの場合）。

ユーザーコントロール

ほとんどのインタラクションでは、ユーザーは自分のアクションを元に戻したりやり直したりできるべきです。ほとんどの選択コントロールでは選択を解除できますが、この場合、選択されたラジオボタンをクリックまたはタップして選択解除することはできません—選択は最終的なアクションです。デフォルトで何も選択されていない場合、その最終性は伝わりません。デフォルトでラジオボタンを選択することは、ユーザーがセットの中から1つを選択する必要があることを伝えます。

タスクの迅速化

ラジオボタンのセットの中で1つの選択肢が最も望ましいまたは頻繁に選択される場合、それをデフォルトで選択することが役立ちます。これにより、インタラクションコストが削減され、ユーザーの時間とクリックを節約できます。

提案の力

デフォルトでラジオボタンが選択されているデザインは、ユーザーに強い提案を行います。これにより、最良の決定を下す手助けとなり、彼らの自信を高めることができます。（このガイダンスは注意して使用し、良い目的のためだけに使用してください。）

開発ガイドライン

使用法

ラジオ入力を使用してユーザータイプを選択するユーザーインターフェースをレンダリングします。 

  1. import { RadioControl } from '@wordpress/components';
  2. import { useState } from 'react';
  4. const MyRadioControl = () => {
  5.    const [ option, setOption ] = useState( 'a' );
  7.    return (
  8.    <RadioControl
  9.    label="User type"
  10.    help="The type of the current user"
  11.    selected={ option }
  12.    options={ [
  13.    { label: 'Author', value: 'a' },
  14.    { label: 'Editor', value: 'e' },
  15.    ] }
  16.    onChange={ ( value ) => setOption( value ) }
  17.    />
  18.    );
  19. };

プロパティ

コンポーネントは次のプロパティを受け入れます：

help: string | Element

このプロパティが追加されると、helpプロパティをコンテンツとして使用してヘルプテキストが生成されます。

  • 必須: いいえ

hideLabelFromVision: boolean

trueの場合、ラベルはスクリーンリーダーにのみ表示されます。

  • 必須: いいえ

label: string

このプロパティが追加されると、labelプロパティをコンテンツとして使用してラベルが生成されます。

  • 必須: いいえ

onChange: ( value: string ) => void

新しく選択されているオプションの値を入力として受け取る関数です。

  • 必須: はい

options: { label: string, value: string }[]

オプションの値とラベルを含むオブジェクトの配列です。

  • label: string ユーザーに表示されるラベル。
  • value: string 選択と比較され、onChangeに渡される内部値。
  • 必須: いいえ

selected: string

現在選択されているオプションの値プロパティ。

  • 必須: いいえ

関連コンポーネント

  • セットから1つまたは複数のアイテムを選択するには、CheckboxControlコンポーネントを使用します。
  • 単一の設定をオンまたはオフに切り替えるには、ToggleControlコンポーネントを使用します。
  • セグメントボタングループとしてフォーマットするには、ToggleGroupControlコンポーネントを使用します。