# 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

```kotlin
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.

## Related components

- [Checkbox](https://m3e.ljzapps.app/docs/components/checkbox.md)
- [Toggle button](https://m3e.ljzapps.app/docs/components/toggle-button.md)
- [Radio button](https://m3e.ljzapps.app/docs/components/radio-button.md)