FDS - コンポーネントガイドライン

Radio Button

ユーザーが複数の選択肢の中から1つだけを選択するためのインタラクティブなコンポーネントです。ラジオボタンは、選択項目の横に表示されます。ユーザーは、その中から1つだけを選択することができます。

設計の原則

  • 複数選択が必要な場合、もしくは選択する項目がひとつしかない場合は、必ずチェックボックスを使用します。
  • ラジオボタンはテキストの左側に配置してください。画面を拡大表示している利用者でも見つけやすくなります。

Properties (振る舞いの設定)

Component Propertiesで設定されている内容。

Variables (色の設定)

各ステート時の配色はこちらを参考にしてください。

State

Style Element Token
  Label General/Neutral/main
  Label:disabled General/Neutral/disabled
Selected radio_button General/Primary/main
  radio_button:disabled General/Neutral/disabled
Unselected radio_button:outline General/Neutral/subtle
  radio_button:outline-hover General/Primary/accent
  radio_button:background  General/Neutral/contrast
  radio_button:disabled-outline General/Neutral/disabled
  radio_button:disabled  General/Neutral/disabled background

State (Static)

Style Element Token
  Label General/Neutral/static white
  Label:disabled General/Neutral/static white opacitiy25
Selected radio_button General/Neutral/static white
  radio_button:disabled General/Neutral/static white opacitiy25
Unselected radio_button:outline General/Neutral/static white opacitiy80
  radio_button:outline-hover General/Neutral/static white
  radio_button:background  General/Neutral/contrast opacity 16
  radio_button:disabled-outline General/Neutral/static white opacitiy16
  radio_button:disabled  General/Neutral/static white opacitiy25

おすすめの記事

TOP