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
- Flutter code
  - 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

Flutter code

In your screen you can use. Add as many “OdsRadioButton” as you wish and place them in a “Column”, for example.

enum Options { option1, option2, option3 }
Options? _selectedOption = Options.option1;

return OdsRadioButton(
  value: Options.option1,
  groupValue: _selectedOption,
  onCheckedChange: (Options? value) {
    setState(
        () {
         _selectedOption = value;
        },
      );
    },
)

OdsRadioButton API

Parameter	Default value	Description
`value: T`		The value represented by this radio button
`groupValue: T?`		The currently selected value for a group of radio buttons.
`onCheckedChange: ((value: T?) -> Callback)?`	`null`	Called when the user selects this radio button. The radio button passes [value] as a parameter to this callback. The radio button does not actually change state until the parent widget rebuilds theradio button with the new [groupValue]. If null, the radio button will be displayed as disabled. The provided callback will not be invoked if this radio button is already selected.
`enabled: bool?`	false	Controls the enabled state of the radio button. When false, this button will not be clickable.