ラジオボタン

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

ラベルのない 2 つのラジオボタン。左側のボタンが選択され、選択状態を示すために円が塗りつぶされています。右側のボタンが入力されていない
図 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)
                )
            }
        }
    }
}

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

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

結果

[通話]、[不在着信]、[友だち] というラベルの付いた 3 つのラジオボタンのリスト。[Friends] ラジオボタンが選択されています。
図 2. [友だち] オプションが選択された 3 つのラジオボタン。

参考情報