Material 3 Switches in Jetpack Compose

Get started with Material 3 switches in Jetpack Compose to create user-friendly interfaces for toggling settings or features.

Explore Switch Styles

Learn to implement three Material 3 switch types for toggling options.

Basic Switch

Toggles between checked and unchecked states with default appearance.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }
    Switch(
        checked = checked,
        onCheckedChange = { checked = it }
    )
}
  

Use a Basic Switch when you want to toggle a simple setting.

Examples:

• Toggle notifications in a settings app
• Enable a feature in a form
• Select an option in a preferences panel

---

Switch with Custom Thumb

Customizes the thumb with an icon when checked.

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }
    Switch(
        checked = checked,
        onCheckedChange = { checked = it },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize)
                )
            }
        } else {
            null
        }
    )
}
  

Use a Switch with Custom Thumb when you want to enhance visual feedback.

Examples:

• Indicate active status in a settings menu
• Highlight enabled features
• Customize toggle appearance in a form

---

Switch with Custom Colors

Customizes thumb and track colors based on checked state.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }
    Switch(
        checked = checked,
        onCheckedChange = { checked = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer
        )
    )
}
  

Use a Switch with Custom Colors when you want to match app theme or branding.

Examples:

• Style toggles in a themed settings screen
• Highlight enabled states in a control panel
• Customize switches in a branded app

---

Switch Properties

Understand the key properties used in the switch examples.

Property	Usage
checked*	Required: Boolean for switch state (true/false)
onCheckedChange*	Required: Callback for state changes
enabled	Controls if the switch is interactive
colors	Customizes thumb and track colors
thumbContent	Customizes thumb appearance when checked