ラジオボタン

ラジオボタンを使用すると、ユーザーはオプションのセットから 1 つのオプションを選択できます。ラジオボタンは、リストから 1 つのアイテムのみを選択できる場合に使用します。ユーザーが複数の項目を選択する必要がある場合は、代わりにスイッチを使用します。

API サーフェス

RadioButton コンポーザブルを使用して、使用可能なオプションを一覧表示します。各 RadioButton オプションとそのラベルを Row コンポーネント内にラップして、グループ化します。

RadioButton には、次の主なパラメータが含まれています。

• selected: ラジオボタンが選択されているかどうかを示します。
• onClick: ラジオボタンがクリックされたときに実行されるラムダ関数。これが null の場合、ユーザーはラジオボタンを直接操作できません。
• enabled: ラジオボタンを有効または無効にします。無効になっているラジオボタンは操作できません。
• interactionSource: ボタンのインタラクション ステータス（押された、ホバーされた、フォーカスされたなど）を監視できます。

基本的なラジオボタンを作成する

次のコード スニペットは、Column 内にラジオボタンのリストをレンダリングします。

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

コードに関する主なポイント

• radioOptions は、ラジオボタンのラベルを表します。
• コンポーズ可能な関数 remember は、状態変数 selectedOption と、その状態を更新する関数 onOptionSelected を作成します。この状態には、現在選択されているラジオボタン オプションが保持されます。
  • mutableStateOf(radioOptions[0]) は、状態をリストの最初のアイテムに初期化します。[通話] が最初の項目であるため、デフォルトで選択されているラジオボタンです。
• Modifier.selectableGroup() を使用すると、スクリーン リーダーで適切なユーザー補助動作が確実に実行されます。この Column 内の要素が選択可能なグループの一部であることをシステムに通知し、スクリーン リーダーによる適切なサポートを可能にします。
• Modifier.selectable() を使用すると、Row 全体が 1 つの選択可能なアイテムとして機能します。
  • selected は、selectedOption の状態に基づいて現在の Row が選択されているかどうかを示します。
  • onClick ラムダ関数は、Row がクリックされたときに、selectedOption 状態をクリックされたオプションに更新します。
  • role = Role.RadioButton は、Row がラジオボタンとして機能することをユーザー補助サービスに通知します。
• RadioButton(...) は RadioButton コンポーザブルを作成します。
  • RadioButton の onClick = null は、ユーザー補助を改善します。これにより、ラジオボタンがクリック イベントを直接処理しなくなり、Row の selectable 修飾子が選択状態とユーザー補助の動作を管理できるようになります。

結果

参考情報

• マテリアル デザイン: ボタン