Switches

Switches toggle the state of a single item on or off.

Android check Web Flutter iOS Not available

List of phone settings. Each setting has a switch


Usage

Switches are the preferred way to adjust settings on mobile.

Use switches to:

  • Toggle a single item on or off, on mobile and tablet
  • Immediately activate or deactivate something

Principles

Familiar

Switches 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 switch has been selected, and selected items should be more visually prominent than unselected items.

Efficient

Switches make it easy to compare available options.


When to use switches

Switches should be used instead of radio buttons if each item in a set can be independently controlled.

Switches should be used instead of radio buttons if each item in a set can be independently controlled.

List of phone settings. Each item has a radio button
Don'tDon't use radio buttons to toggle items on or off. Radio buttons convey that a set of items are options, and that only one can be selected at a time. Instead, use switches.
List of phone settings. Each item has a switch
Use switches to turn an item on or off, especially on mobile instead of a checkbox.

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 radio buttons 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 switches, to fit platform standards.

Android
Use Material switches.
iOS
Use platform-specific switches on iOS instead of Material switches, as they have matching functionality and presentation.

Behavior

A switch is successfully toggled when the switch thumb slides to the other side of the track upon user interaction.

Text label

The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Avoid creating a switch that includes the text "on" and "off" within the graphic itself. The switch alone should be sufficient.

Unselected and selected switches with numbers identifying its 2 elements and states
1. Thumb
2. Track
Using a switch to turn an option on and off

When a user toggles a switch, its corresponding action takes effect immediately.

Display processing status

Because a switch shows the actual status of something, sometimes there is a delay in its change of state. In such cases, a processing status animation can be used.

An indicator can be used on the full screen to demonstrate status, as described in the progress indicator guidance. Processing status should not be indicated through an animation on the thumb of the switch because it will be harder to read and understand.

Don't demonstrate status by animating the thumb of a switch.

States

Switches can be on or off. Switches have enabled, disabled, hover, focused, and pressed states.

Switches can be on or off. Switches have enabled, disabled, hover, focused, and pressed states.

Display the outer ripple only on form factors that use touch, where interaction may otherwise obstruct the switch completely.

For desktop, the ripple reaction isn't needed.

Matrix of all switch state combinations
Interaction states for on and off switches

Theming

Crane Material Theme

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


Specs

  • Measurement 20
  • Measurement 36
 

Using switches

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

Note: The SwitchMaterial widget provides a complete implementation of Material Design's switch component. It extends from the support library's SwitchCompat widget, but not from the framework Switch widget. As such, it does not auto-inflate, unlike other selection controls, and must be explicitly specified in layouts.

Use switches to:

  • Toggle a single item on or off, on mobile and tablet
  • Immediately activate or deactivate something

Making switches accessible

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

Switch

A Switch represents a button with two states, on and off. Switches are most often used on mobile devices to enable and disable options in an options menu. A switch consists of a track and thumb; the thumb moves along the track to indicate its current state.

Switches example

API and source code:

The following example shows a list of five switches.

Example of 5 switches, the first one is toggled and the last one is disabled.

In the layout:

In code:

Anatomy and key properties

The following is an anatomy diagram that shows a switch thumb and a switch track:

Switch anatomy diagram

  1. Thumb
  2. Track

Switch attributes

ElementAttributeRelated method(s)Default value
To use material colorsapp:useMaterialThemeColorssetUseMaterialThemeColors
isUseMaterialThemeColors
true (ignored if specific tint attrs are set)
Min sizeandroid:minWidth
android:minHeight
(set/get)MinWidth
(set/get)MinHeight
?attr/minTouchTargetSize

The color of the switch defaults to using ?attr/colorSurface, ?attr/colorOnSurface, and ?attr/colorSecondary 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:

Thumb attributes

ElementAttributeRelated method(s)Default value
Thumbandroid:thumbsetThumbDrawable
getThumbDrawable
inherits from SwitchCompat
Colorapp:thumbTintsetThumbTintList
getThumbTintList
?attr/colorSurface (unchecked)
?attr/colorSecondary (checked)
ElevationN/AN/A4dp

Track attributes

ElementAttributeRelated method(s)Default value
Trackapp:tracksetTrackDrawable
getTrackDrawable
inherits from SwitchCompat
Colorapp:trackTintsetTrackTintList
getTrackTintList
?attr/colorOnSurface (unchecked)
?attr/colorSecondary (checked)

Text label attributes

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

Switch states

Switches can be on or off. Switches have enabled, hover, focused, and pressed states.

Display the outer radial reaction only on form factors that use touch, where interaction may obstruct the element completely.

For desktop, the radial reaction isn't needed.

Switch states in an array. Columns are enabled, disabled, hover, focused,
pressed. Rows are on or off

Styles

ElementStyle
Default styleWidget.MaterialComponents.CompoundButton.Switch

Default style theme attribute: ?attr/switchStyle

See the full list of styles and attrs.

Theming switches

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

Switch theming example

API and source code:

The following example shows a list of switches with Material Theming.

"5 switches with brown text: first switch is on and has pink thumb and track"

Implementing switch theming

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

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

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

No Android implementation guidance available

Using switches

Use switches to:

  • Toggle a single item on or off, on mobile and tablet
  • Immediately activate or deactivate something

Installing switches

Styles

JavaScript instantiation

The switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch on the mdc-switch element.

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

Switches

Switch example

Switch states

Switches can be on or off. Switches have enabled, hover, focused, and pressed states.

Switch states in a table. Columns are enabled, disabled, hover, focused,
pressed. Rows are on or off.

Other variants

Initially disabled switch

Add the disabled attribute to the mdc-switch element to disable the switch. This logic is handled by the MDCSwitch.disabled property, but you'll want to avoid a FOUC by initially adding this attribute.

Initially "on" switch

Add the mdc-switch--selected class and aria-checked="true" attribute to the mdc-switch element to toggle the switch to "on". This logic is handled by the MDCSwitch.selected method, but you'll want to avoid a FOUC by initially adding this class and attribute.

API

CSS classes

CSS ClassDescription
mdc-switchMandatory, for the parent element.
mdc-switch--unselectedOptional, styles the switch as unselected ("off")
mdc-switch--selectedOptional, styles the switch as selected ("on")
mdc-switch__trackMandatory, for the track element.
mdc-switch__handle-trackMandatory, for the handle's track element.
mdc-switch__handleMandatory, for the handle element.
mdc-switch__shadowMandatory, for the shadow effect.
mdc-elevation-overlayMandatory, for the shadow effect's overlay in dark mode.
mdc-switch__rippleMandatory, for the ripple effect.
mdc-switch__iconsMandatory, for the icons.
mdc-switch__iconMandatory, for the icon elements.
mdc-switch__icon--onMandatory, for the on icon.
mdc-switch__icon--offMandatory, for the off icon.

Theme mixin

The switch may be customized using the theme() mixin and providing an MDC Theme string (such as primary) or other values to the theme keys.

View the theme file for available keys and built-in themes.

MDCSwitch properties

PropertyValue TypeDescription
disabledBooleanIndicates whether or not the switch is disabled.
selectedBooleanIf true, the switch is on. If false, the switch is off.

Usage within web frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a switch 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.

See MDCSwitchAdapter and MDCSwitchFoundation for up-to-date code documentation of switch's foundation API.

No Web implementation guidance available

Using switches

Use switches to:

  • Toggle a single item on or off, on mobile and tablet
  • Immediately activate or deactivate something

Making switches 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.

Switch Anatomy

The following is an anatomy diagram that shows a switch thumb and a switch track:

Switch anatomy diagram

  1. Thumb
  2. Track

Thumb attributes

 Property
Active ColoractiveColor
Inactive ColorinactiveThumbColor

Track attributes

 Property
Active ColoractiveTrackColor
Inactive ColorinactiveTrackColor

Switch example

Switch

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

"Regular switches example for Flutter."

Switch states

Switches can be on or off. Switches have enabled, hover, focused, and pressed states.

Display the outer radial reaction only on form factors that use touch, where interaction may obstruct the element completely.

For desktop, the radial reaction isn't needed.

Switch states in an array. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off

Theming

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

Switch

The following example shows switches with the Material Shrine Theme.

"Switches with Shrine theming."

No Flutter implementation guidance available
No iOS implementation guidance available

Up next