ラジオボタン

ラジオボタンを使用すると、ユーザーは一連のオプションから 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]) は、状態をリストの最初のアイテムに初期化します。[Calls] は最初の項目であるため、デフォルトで選択されているラジオボタンです。
• Modifier.selectableGroup() は、スクリーン リーダーの適切なユーザー補助動作を保証します。これにより、この Column 内の要素が選択可能なグループの一部であることがシステムに通知され、スクリーン リーダーが適切にサポートされます。
• Modifier.selectable() を使用すると、Row 全体が選択可能な単一のアイテムとして機能します。
  • selected は、現在の Row が selectedOption 状態に基づいて選択されているかどうかを示します。
  • onClick ラムダ関数は、Row がクリックされたときに、selectedOption 状態をクリックされたオプションに更新します。
  • role = Role.RadioButton は、Row がラジオボタンとして機能することをユーザー補助サービスに通知します。
• RadioButton(...) は RadioButton コンポーザブルを作成します。
  • RadioButton の onClick = null により、ユーザー補助機能が向上します。これにより、ラジオボタンがクリック イベントを直接処理するのを防ぎ、Row の selectable 修飾子が選択状態とユーザー補助動作を管理できるようになります。

結果

参考情報

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