Switch

Toggles one setting on or off, and applies the change immediately.

Category: Selection and input
API status: Stable
Compose APIs: Switch, SwitchDefaults
Interactive page: https://m3e.ljzapps.app/#components/switch

When to use

Use a switch for a setting whose effect is immediate, such as turning notifications on. Use a checkbox when the change is applied later, for example after pressing a submit button.

A thumb icon makes the state visible without relying on color alone.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Basic

var checked by rememberSaveable { mutableStateOf(false) }

Row(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }, role = Role.Switch),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
    Text("Notifications")
    Switch(checked = checked, onCheckedChange = null)
}

Parameters

Name	Type	Default	Description
`checked`	`Boolean`		Whether the switch is on.
`onCheckedChange`	`((Boolean) -> Unit)?`		Pass null when a parent toggleable handles the change.
`thumbContent`	`@Composable (() -> Unit)?`	`null`	Icon inside the thumb.
`colors`	`SwitchColors`	`SwitchDefaults.colors()`	Track, thumb and border colors.

Guidelines

Do:

Use for immediate settings.
Label the setting, not the state.

Don't:

Do not use a switch to submit a form.
Do not change the label when the state changes.

Accessibility

Use Role.Switch on the toggleable parent so the control is announced as a switch.
The label should name the setting, not the action.