ラジオボタン

ラジオボタンを使用すると、ユーザーは選択肢のセットから 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 は、現在の Row が selectedOption 状態に基づいて選択されているかどうかを示します。
  • onClick ラムダ関数は、Row がクリックされたときに selectedOption 状態をクリックされたオプションに更新します。
  • role = Role.RadioButton は、Row がラジオボタンとして機能することをユーザー補助サービスに通知します。
• RadioButton(...) は RadioButton コンポーザブルを作成します。
  • RadioButton の onClick = null は、アクセシビリティを向上させます。これにより、ラジオボタンがクリック イベントを直接処理することを防ぎ、Row の selectable 修飾子が選択状態とユーザー補助の動作を管理できるようになります。

結果

参考情報

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