| <html devsite="true"> |
| <head> |
| <title>RadioButtonKt</title> |
| {% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>RadioButtonKt</h1> |
| <p> |
| <pre>public final class RadioButtonKt</pre> |
| </p> |
| <hr> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Public methods</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> void</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/material/RadioButtonKt.html#RadioButton(kotlin.Boolean,kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.RadioButtonColors)">RadioButton</a>(<br> boolean selected,<br> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> onClick,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> boolean enabled,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a> interactionSource,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/material/RadioButtonColors.html">RadioButtonColors</a> colors<br>)</code></div> |
| <p><a href="https://material.io/components/radio-buttons" class="external" target="_blank">Material Design radio button</a>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public methods</h2> |
| <div><a name="RadioButton(kotlin.Boolean, kotlin.Function0, Modifier, kotlin.Boolean, androidx.compose.foundation.interaction.MutableInteractionSource, androidx.compose.material.RadioButtonColors)"></a><a name="RadioButton-kotlin.Boolean-kotlin.Function0-Modifier-kotlin.Boolean-androidx.compose.foundation.interaction.MutableInteractionSource-androidx.compose.material.RadioButtonColors-"></a><a name="radiobutton"></a> |
| <h3 class="api-name" id="RadioButton(kotlin.Boolean,kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.RadioButtonColors)">RadioButton</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/material/RadioButtonKt.html#RadioButton(kotlin.Boolean,kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.RadioButtonColors)">RadioButton</a>(<br> boolean selected,<br> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> onClick,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> boolean enabled,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a> interactionSource,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/material/RadioButtonColors.html">RadioButtonColors</a> colors<br>)</pre> |
| <p><a href="https://material.io/components/radio-buttons" class="external" target="_blank">Material Design radio button</a>.</p> |
| <p>Radio buttons allow users to select one option from a set.</p> |
| <p><img alt="Radio buttons image" src="https://developer.android.com/images/reference/androidx/compose/material/radio-buttons.png"></p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Row |
| import androidx.compose.foundation.selection.selectableGroup |
| import androidx.compose.material.RadioButton |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| // We have two radio buttons and only one can be selected |
| var state by remember { mutableStateOf(true) } |
| // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior |
| Row(Modifier.selectableGroup()) { |
| RadioButton( |
| selected = state, |
| onClick = { state = true } |
| ) |
| RadioButton( |
| selected = !state, |
| onClick = { state = false } |
| ) |
| }</pre> |
| <p><code><a href="/reference/androidx/compose/material/package-summary.html#RadioButton(kotlin.Boolean,kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.RadioButtonColors)">RadioButton</a></code>s can be combined together with <code><a href="/reference/androidx/compose/material/package-summary.html#Text(kotlin.String,Modifier,Color,TextUnit,FontStyle,FontWeight,FontFamily,TextUnit,TextDecoration,TextAlign,TextUnit,TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Function1,TextStyle)">Text</a></code> in the desired layout (e.g. <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Column(Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,AlignmentHorizontal,kotlin.Function1)">Column</a></code> or <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Row(Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,AlignmentVertical,kotlin.Function1)">Row</a></code>) to achieve radio group-like behaviour, where the entire layout is selectable:</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.Row |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.padding |
| import androidx.compose.foundation.layout.height |
| import androidx.compose.foundation.selection.selectable |
| import androidx.compose.foundation.selection.selectableGroup |
| import androidx.compose.material.RadioButton |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| 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 screenreaders |
| ) |
| Text( |
| text = text, |
| style = MaterialTheme.typography.body1.merge(), |
| modifier = Modifier.padding(start = 16.dp) |
| ) |
| } |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>boolean selected</code></td> |
| <td> |
| <p>boolean state for this button: either it is selected or not</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> onClick</code></td> |
| <td> |
| <p>callback to be invoked when the RadioButton is being clicked. If null, then this is passive and relies entirely on a higher-level component to control the state.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier</code></td> |
| <td> |
| <p>Modifier to be applied to the radio button</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean enabled</code></td> |
| <td> |
| <p>Controls the enabled state of the <code><a href="/reference/androidx/compose/material/package-summary.html#RadioButton(kotlin.Boolean,kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.RadioButtonColors)">RadioButton</a></code>. When <code>false</code>, this button will not be selectable and appears in the disabled ui state</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a> interactionSource</code></td> |
| <td> |
| <p>the <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> representing the stream of <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s for this RadioButton. You can create and pass in your own remembered <code><a href="/reference/androidx/compose/foundation/interaction/MutableInteractionSource.html">MutableInteractionSource</a></code> if you want to observe <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s and customize the appearance / behavior of this RadioButton in different <code><a href="/reference/androidx/compose/foundation/interaction/Interaction.html">Interaction</a></code>s.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/material/RadioButtonColors.html">RadioButtonColors</a> colors</code></td> |
| <td> |
| <p><code><a href="/reference/androidx/compose/material/RadioButtonColors.html">RadioButtonColors</a></code> that will be used to resolve the color used for this RadioButton in different states. See <code><a href="/reference/androidx/compose/material/RadioButtonDefaults.html#colors(Color,Color,Color)">RadioButtonDefaults.colors</a></code>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </body> |
| </html> |
