Selection controls: radio buttons

Selection controls allow 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.

Radio button hero example for menu options

Contents

Using radio buttons

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

Import radio buttons

Before you can use radio buttons, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making radio buttons accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Radio buttons

Radio buttons example

Radio

The following example shows radio buttons being used in a list with the last row disabled.

"Regular radio button example for Flutter."

Radio button states

Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.

Radio button states in an array. Columns are enabled, disabled, hover, focused, pressed. Rows are selected or unselected

Theming

Radio buttons support Material Theming and can be customized in terms of color.

The following example shows radio buttons with the Material Shrine Theme.

"Radio buttons with Shrine theming."