Radio

フォームで複数の選択肢から1つだけを選択するコンポーネントです。支払い方法や配送オプションの選択に使用します。

Basic

jui-radio の最も基本的な使用例です。

Disabled

disabled プロパティを使用して、ラジオボタンを無効状態にできます。

関連コンポーネント

• Checkbox — 複数選択可能なチェックボックス
• Toggle — オン/オフ切り替えスイッチ
• Form Field — ラベルやバリデーションを付加するラッパー

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
:checked + sibling	選択状態スタイル	全ver	全ver	全ver	Baseline
:has()	親要素の状態反映	105+	121+	15.4+	Baseline 2023
color-mix()	カラー生成	111+	113+	16.4+	Baseline 2023

💡 すべての機能が Baseline 2023 以降に対応しており、モダンブラウザで問題なく動作します。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
:checked +	太古の昔から対応	WA 済み ✅
:has()	2023年12月	2026年半ば
color-mix()	2023年	2025年後半 ✅

アクセシビリティ

• WAI-ARIA:
  • 内部でネイティブの <input type="radio"> 要素が生成され、ラジオボタンとしての標準的なセマンティクス（選択状態のスクリーンリーダーへの伝達など）が保証されます。
  • 全体が <label> 要素で囲まれ、htmlFor でネイティブ <input> と関連付けられます。label Prop またはデフォルト slot で渡したテキストがアクセシブルな名前になります（slot が優先）。
  • サークルとドットを描画する装飾用の <span> には aria-hidden="true" が付与され、支援技術からは無視されます。
  • 同じ name を共有する複数の jui-radio がラジオグループを形成し、checked 状態と value がフォーム送信に用いられます（formAssociated によりネイティブフォームへ参加します）。
• キーボードナビゲーション:
  • ネイティブの <input type="radio"> を使用しているため、Tab でグループにフォーカスでき、同一 name グループ内では矢印キー（↑ / ↓ / ← / →）で選択を移動できます。これらはブラウザのネイティブ挙動として提供されます。
  • disabled の時はネイティブ <input> に disabled 属性が付与され、フォーカス順および操作の対象から除外されます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
checked	checked	選択状態	boolean	false
disabled	disabled	無効状態	boolean	false
label	label	ラベルテキスト。Slotでも代替可	string	''
name	name	ラジオグループ名	string	''
value	value	このラジオの値	string	''

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiChange	選択状態が変更されたときに発火するイベント（選択されたvalueを返す）	CustomEvent<{ value: string; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ラベルテキスト（label Prop より優先）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"label"	ラベル要素
"radio"	ラジオボタンの外枠（サークル）

---

Built with StencilJS