フォーム

Radio

ラジオグループの選択肢の 1 つ。name を共有してグループにまとめます。

ReactVueWeb Components
Storybook で見る

プレイグラウンド

使用例

<fieldset>
  <legend>Plan</legend>
  <Radio name="plan" value="free" label="Free" />
  <Radio name="plan" value="pro" label="Pro" />
</fieldset>

設定できる項目

名前 既定値 説明
label ReactNode Inline label shown next to the radio.

アクセシビリティ

  • 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA(明るさの差が 7:1 以上)を満たします。
  • マウスがなくても、キーボードだけですべての操作ができます。
  • いまどこを操作しているかを示す枠(フォーカスの囲み)が、常にはっきり見えます。
  • 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。

どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA(WCAG 2.1 AAA)を満たすよう作っています。