Radio buttons

Radio button selection control allows the user to select options.

Use radio buttons to:

Select a single option from a list
Expose all available options
If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.

On this page

Specifications references
Accessibility
Implementation
- Jetpack Compose
  - OdsRadioButton API

Specifications references

Accessibility

Please follow accessibility criteria for development.

Radio buttons support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in radio buttons is automatically provided to accessibility services. Additional content labels are usually unnecessary.

Implementation

RadioButton RadioButton dark

Jetpack Compose

In your composable screen you can use:

OdsRadioButton(
    selected = true,
    onClick = { doSomething() },
    enabled = true
)

OdsRadioButton API

Parameter	Default value	Description
`selected: Boolean`		Controls the selected state of the radio button
`onClick: (() -> Unit)?`		Callback invoked on radio button click. If `null`, then the radio button will not handle input events, and only act as a visual indicator of `selected` state.
`modifier: Modifier`	`Modifier`	`Modifier` applied to the radio button
`enabled: Boolean`	`true`	Controls the enabled state of the radio button. When `false`, the button will not be selectable and appears disabled.