Radio buttons

Radio buttons allow users to select one option from a set.

Android check Web Flutter iOS Not available

List of options to select phone ringtone. Each option has a radio button
Radio buttons allow for a single option to be selected from a visible list.


Usage

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.

Principles

Familiar

Radio buttons have been in user interfaces for a long time and should be used as expected.

Scannable

It should be visible at a glance if a radio button has been selected, and selected items should be more visually prominent than unselected items.

Efficient

Radio buttons make it easy to compare available options.


When to use radio buttons

Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

List of shipping options to home or work. Each option has a checkbox
Don'tDon't use checkboxes when only one item can be selected from a list. Use radio buttons instead.
List of shipping options to home or work. Each option has a radio button
DoUse radio buttons when only one item can be selected from a list.

Other selection controls

Selection controls allow users to complete tasks which involve making choices such as selecting options...

Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.

Two checkboxes. One is selected and the other is unselected

Checkboxes

Two radio buttons. One is selected and the other is unselected

Radio buttons

Two switches. One is on and the other is off

Switches

Checkboxes and switches are alternative selection controls that can be used to enter decisions or declare preferences such as settings or dialogs.


Platform differences

Adapt selection controls, including checkboxes, to fit platform standards.

Android
Use Material radio buttons.
iOS
On iOS, use check mark lists instead of radio buttons as these are the graphics expected on iOS.

Behavior

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.

Selected and unselected radio buttons
Selected and unselected radio buttons.
Using radio buttons to select a single item.

States

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

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

Matrix of all radio button state combinations
Interaction states for selected and unselected radio buttons.

Theming

Crane Material Theme

This travel app's radio buttons have been customized using Material Theming to use custom color. Crane is a travel app that uses Material Design components...


Specs

  •   Measurement 20 

 

Using radio buttons

Before you can use Material radio buttons, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Note:<RadioButton> is auto-inflated as <com.google.android.material.button.MaterialRadioButton> via MaterialComponentsViewInflater when using a non-Bridge Theme.MaterialComponents.* theme.

Making radio buttons accessible

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.

Grouping radio buttons

Changes in the states of one radio button can affect other buttons in the group. Specifically, selecting a RadioButton in a RadioGroup will de-select all other buttons in that group. See the example section below for implementation details.

Radio button

A radio button is a circle that is filled in with an inset when selected. 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.

Radio buttons example

API and source code:

The following example shows a radio button group with five radio buttons.

Example radio button group with 5 radio buttons, the first one is selected and
the last one is disabled.

In the layout:

In code:

Key properties

Radio button attributes

ElementAttributeRelated method(s)Default value
To use material colorsapp:useMaterialThemeColorssetUseMaterialThemeColors
isUseMaterialThemeColors
true (ignored if app:buttonTint is set)
Colorapp:buttonTintsetButtonTintList
getButtonTintList
null
Min sizeandroid:minWidth
android:minHeight
(set/get)MinWidth
(set/get)MinHeight
?attr/minTouchTargetSize

The color of the radio button defaults to ?attr/colorOnSurface (unchecked) and ?attr/colorSecondary (checked) defined in your app theme. If you want to override this behavior, as you might with a custom drawable that should not be tinted, set app:useMaterialThemeColors to false:

Text label attributes

ElementAttributeRelated method(s)Default value
Text labelandroid:textsetText
getText
null
Colorandroid:textColorsetTextColor
getTextColors
inherits from AppCompatRadioButton
Typographyandroid:textAppearancesetTextAppearanceinherits from AppCompatRadioButton

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

Styles

ElementStyle
Default styleWidget.MaterialComponents.CompoundButton.RadioButton

Default style theme attribute: ?attr/radioButtonStyle

See the full list of styles and attrs.

Theming radio buttons

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

Radio button theming example

API and source code:

The following example shows a radio button with Material Theming.

"5 radio buttons with brown text; first selected with pink outline and fill,
last disabled with light brown text and
button"

Implementing radio button theming

Using theme attributes in res/values/styles.xml (themes all radio buttons and affects other components):

or using default style theme attributes, styles and theme overlays (themes all radio buttons but does not affect other components):

you can also change the radio button colors via the ?attr/buttonTint attribute:

and in color/button_tint.xml:

or using the styles in the layout (affects only this radio button):

No Android implementation guidance available

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.

Installing radio buttons

Styles

Note: The form field styles are only required when the radio button is used with the form field.

JavaScript instantiation

The radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating MDCRadio on the mdc-radio element. To activate the ripple effect upon interacting with the label, you must also instantiate MDCFormField on the mdc-form-field element and set the MDCRadio instance as its input.

Note: See Importing the JS component for more information on how to import JavaScript.

Making radio buttons accessible

Material Design spec advises that touch targets should be at least 48px x 48px. To meet this requirement, add the mdc-radio--touch class to your radio as follows:

Note that the outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Radio buttons

We recommend using MDC Radio with MDC Form Field for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.

Radio button example

Radio button states

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

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

Other variants

Disabled radio buttons

To disable a radio button, add the mdc-radio--disabled class to the root element and set the disabled attribute on the <input> element. Disabled radio buttons cannot be interacted with and have no visual interaction effect.

API

Sass mixins

MDC Radio uses MDC Theme's secondary color by default. Use the following mixins to customize it.

MixinDescription
unchecked-stroke-color($color)Sets the stroke color of an unchecked, enabled radio button
checked-stroke-color($color)Sets the stroke color of a checked, enabled radio button
ink-color($color)Sets the ink color of an enabled radio button
disabled-unchecked-stroke-color($color)Sets the stroke color of an unchecked, disabled radio button
disabled-checked-stroke-color($color)Sets the stroke color of a checked, disabled radio button
disabled-ink-color($color)Sets the ink color of a disabled radio button
focus-indicator-color($color)Sets the color of the focus indicator
touch-target($size, $ripple-size)Sets radio touch target size which can be more than the ripple size. Param $ripple-size is required for custom ripple size, defaults to $ripple-size.
ripple-size($size)Sets custom ripple size of radio.
density($density-scale)Sets density scale for radio. Supported density scale values are -3, -2, -1 and 0 (default).

MDCRadio properties and methods

PropertyValue TypeDescription
checkedBooleanSetter/getter for the radio's checked state
disabledBooleanSetter/getter for the radio's disabled state. Setter proxies to foundation's setDisabled method
valueStringSetter/getter for the radio's value

Usage within web frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCRadioAdapter

Method SignatureDescription
setNativeControlDisabled(disabled: boolean) => voidSets the input's disabled property to the given value
addClass(className: string) => voidAdds a class to the root element
removeClass(className: string) => voidRemoves a class from the root element

MDCRadioFoundation

Method SignatureDescription
setDisabled(disabled: boolean) => voidSets the disabled value of the native control
No Web implementation guidance available

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."

No Flutter implementation guidance available
No iOS implementation guidance available

Up next