---
url: /components/switch/overview.md
description: >-
  Switches toggle the selection of an item on or off. Switches are the best way
  to let users adjust settings.
---

# Switch

Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Switch](/assets/78ac94dc-mrol9oru-switch.BpxVpMKv.webp)

* Use switches (not [radio buttons](../radio-button/overview.md "Radio buttons let people select one option from a set of options.")) if the items in a [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") can be independently controlled
* Switches are the best way to let people adjust settings
* Make sure the switch’s [selection](../../foundations/interaction/selection.md "Selection lets users choose specific items to act on.") (on or off) is visible at a glance

![A switch in two states, off and on.](/assets/3cc36a6f-lwa9bnl5-1.CjkwhwYY.webp)

Switches can be toggled on and off

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/switch) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/Switch.md) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/switch.md) | Available |

## Differences from M2

* Accessibility: Visual presentation is more accessible
* Color: New color mappings meet Material's non-text-contrast requirements in addition to compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Icons: Ability to have an optional icon within the switch handle
* Layout: Track is taller and wider

![M2 switches in off and on states.](/assets/a7abde4e-mg65z0ro-02.eM3edIxV.webp)

M2: Switches have a circular handle that extends beyond the edge of the track

![M3 switch shown toggled off and toggled on. When switched on, it has a checkmark icon.](/assets/1d488dde-mg65zp7b-03.C3CbGDkK.webp)

M3: Switches have a taller and wider track, new color mappings, and the ability to show an icon in the handle