Sparkle Design

Radio

ラジオボタンは単一選択の形式でユーザーからの入力を取得するために使用するコンポーネントです。

FigmaStorybookGitHub
Radio の概要図

Anatomy: 解剖図

Radioの構成要素を示す解剖図。1は選択と非選択の状態を切り替えられる要素を表す円形のRadio Inputを、2はラジオにコンテキストを付与するためのテキスト要素を表すLabelを示します。
ItemNameDescriptionComponentOptional
1Radio Input選択と非選択の状態を切り替えられる要素—
2Labelラジオにコンテキストを付与するためのテキスト要素任意

Options: 選択肢

Size

sm

通常よりも小さなサイズです。限られたスペースにラジオを配置する場合かつ重要性が低い場合に使用します。

smサイズの状態。小さな円形のラジオボタンと「選択肢」というラベルが表示されています。

md (default)

ラジオのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのラジオはノーマルを基準に重要度に応じて使用します。

mdサイズの状態。中サイズの円形のラジオボタンと「選択肢」というラベルが表示されています。

lg

大きなラジオはアクションの重要性を高めるため、使用は極力控えてください。

mdサイズの状態。中サイズの円形のラジオボタンと「選択肢」というラベルが表示されています。

States: 状態

Default

Default Enable状態のRadio。グレーの枠線の空の円形のラジオボタンと「選択肢」というラベルが表示されています。

Enable

ユーザーがラジオを操作する前のデフォルトの状態。

Default Hover状態のRadio。Enableよりも濃いグレーの枠線の空の円形のラジオボタンと「選択肢」というラベルが表示されています。

Hover

ユーザーがラジオにマウスオーバーしている状態。

Default Focus状態のRadio。グレーの枠線の空の円形のラジオボタンが青い枠線で囲まれ、「選択肢」というラベルが表示されています。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてラジオに注視している状態。

Default Disabled状態のRadio。薄いグレーの円形のラジオボタンと薄いグレーの「選択肢」というラベルが表示されています。

Disabled

システムによってラジオが非活性化されている状態。ユーザーによる操作は不能です。

Invalid

Invalid Enable状態のRadio。赤い枠線の円形のラジオボタンと「選択肢」というラベルが表示されています。

Enable

選択内容が特定のフォーマットに基準していない場合（フォーム内の選択が必須のラジオを選択せずに続行しようとした場合など）の状態です。ユーザーが適切な入力を行うことで無効状態は解除されます。

Invalid Hover状態のRadio。Enableよりも濃い赤い枠線の円形のラジオボタンと「選択肢」というラベルが表示されています。

Hover

ユーザーがラジオにマウスオーバーしている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Invalid Focus状態のRadio。赤い枠線の円形のラジオボタンが青い枠線で囲まれ、「選択肢」というラベルが表示されています。

Focus

ラジオがフォーカスされている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Invalid Disabled状態のRadio。薄い赤い枠線の円形のラジオボタンと薄いグレーの「選択肢」というラベルが表示されています。

Disabled

システムによってラジオが非活性化されている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Checked

Checked Enable状態のRadio。中央に白い円が塗りつぶされている青い円形のラジオボタンと「選択肢」というラベルが表示されています。

Enable

ラジオが選択されていることを表す状態。

Checked Hover状態のRadio。中央に白い円が塗りつぶされていて、Enableよりも濃い青い円形のラジオボタンと「選択肢」というラベルが表示されています。

Hover

ユーザーがラジオにマウスオーバーしている場合かつ、ラジオが選択されている場合の状態です。

Checked Focus状態のRadio。中央に白い円が塗りつぶされている青い円形のラジオボタンが青い枠線で囲まれ、「選択肢」というラベルが表示されています。

Focus

ラジオがフォーカスされている場合かつ、ラジオが選択されている場合の状態です。

Checked Disabled状態のRadio。中央に白い円が塗りつぶされている薄い青い円形のラジオボタンと薄いグレーの「選択肢」というラベルが表示されています。

Disabled

ラジオが非活性化されている場合かつ、ラジオが選択されている場合の状態です。

Metrics: 寸法

sm

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 32px
  • Item Spacing: 0px
  • padding Vertical: 8px
  • padding Horizontal: 8px
smサイズの寸法仕様を示す図。

md

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 40px
  • Item Spacing: 0px
  • padding Vertical: 10px
  • padding Horizontal: 10px
mdサイズの寸法仕様を示す図。

lg

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 48px
  • Item Spacing: 0px
  • padding Vertical: 12px
  • padding Horizontal: 12px
lgサイズの寸法仕様を示す図。

Usage: 使い方

Radioを使用する際はFormコンポーネントの用法に従ってください。

適切な使用例。「日本語」「英語」「中国語」という3つのラジオボタンが表示され、「日本語」のラジオボタンが選択されています。
Do

ラジオは常にデフォルトで1つの選択肢が選択されてる状態にしてください。選択できるラジオは1つだけです。

不適切な使用例。「日本語」「英語」「中国語」という3つのラジオボタンが表示され、「日本語」と「中国語」のラジオボタンが複数選択されています。
Don’t

複数選択はできません。

不適切な使用例。「日本語」「英語」「中国語」という3つのラジオボタンが表示され、どれも選択されていません。
Don’t

1つも選択されてない状態を許容しないでください。未選択状態を許容したい場合は代わりにFilter Chip の使用を検討してください。

注意が必要な使用例。「英語」というSelectの下に、「日本語」「英語」（チェックマーク付き）「中国語」「スペイン語」「ポルトガル語」という選択肢が表示されています。
Caution

選択肢が多く、表示スペースが狭い場合は代わりにSelect の使用を検討してください。

適切な使用例。「ON」と「OFF」のスイッチが表示され、「ON」のスイッチが青色でオン状態、「OFF」のスイッチがグレーでオフ状態で表示されています。
Do

オンオフを切り替える機能においては、Switch を使用してください。

不適切な使用例。「ON」と「OFF」のラジオボタンが表示されていて、「ON」のラジオボタンが選択されています。
Don’t

オンオフを切り替える機能に、ラジオを使用しないでください。

Contents: 内容

不適切な使用例。「職種を選ぶ」というラベルの下に「UIデザイナー」「UXデザイナー」「Webデザイナー」「グラフィックデザイナー」という4つのラジオボタンが表示されています。「UIデザイナー」のラジオボタンが選択されています。
Don’t

複数回答できるような設問にラジオを使用しないでください。複数回答にはCheckbox の使用を検討してください。

Related Components: 関連コンポーネント

Filter Chip
Select
Switch

Change log: 変更履歴

DateChanges
2025/1/20ドキュメントを公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ