How to Use Switch Components in Jetpack Compose (With Usage Examples) [2025]

Overview

The Switch component in Jetpack Compose allows users to toggle between two states: checked and unchecked. It is ideal for enabling or disabling settings, features, or selecting options. The component consists of a draggable thumb and a background track, where users can drag the thumb or tap to change its state.

This guide demonstrates how to implement the Switch composable with customization options, including custom thumbs and colors, along with best practices for 2025.

Switch Use Cases Table

Type	Usage Examples
Switch	Toggle notifications, enable dark mode, turn on/off Wi-Fi
Custom Thumb Switch	Custom icon for enabled state, themed settings toggle
Custom Colored Switch	Branded settings, accessibility-focused color schemes

Version Compatibility & Dependencies

This implementation requires a minimum SDK of API level 21 (Android 5.0). Add the Compose BOM to your project:

dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.05.00"))
    implementation("androidx.compose.material3:material3")
}
    

Ensure your app uses a Material 3 theme, such as MaterialTheme. Refer to the Material 3 Switch Guidelines for details.

Creating Switch Components in Jetpack Compose

Basic Switch Example

Creates a standard Switch with checked and unchecked states.

import androidx.compose.material3.Switch
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun BasicSwitchExample() {
    val checked = remember { mutableStateOf(false) }
    Switch(
        checked = checked.value,
        onCheckedChange = { checked.value = it }
    )
}
    

Result: A standard Switch toggling between checked and unchecked states.

---

Custom Thumb Switch Example

Creates a Switch with a custom thumb icon when checked.

import androidx.compose.material3.Switch
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check

@Composable
fun CustomThumbSwitchExample() {
    val checked = remember { mutableStateOf(false) }
    Switch(
        checked = checked.value,
        onCheckedChange = { checked.value = it },
        thumbContent = if (checked.value) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = "Checked"
                )
            }
        } else {
            null
        }
    )
}
    

Result: A Switch with a custom check icon as the thumb when checked.

---

Custom Colors Switch Example

Creates a Switch with custom colors for thumb and track.

import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color

@Composable
fun CustomColorsSwitchExample() {
    val checked = remember { mutableStateOf(false) }
    Switch(
        checked = checked.value,
        onCheckedChange = { checked.value = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color(0xFF1767D0),
            checkedTrackColor = Color(0xFF4A90E2),
            uncheckedThumbColor = Color(0xFF757575),
            uncheckedTrackColor = Color(0xFFB0BEC5)
        )
    )
}
    

Result: A Switch with custom blue colors when checked and grey when unchecked.

---

Key Points for Implementation

• checked: Defines the initial state of the Switch (true for checked, false for unchecked).
• onCheckedChange: Callback triggered when the Switch state changes.
• enabled: Determines if the Switch is interactive (true) or disabled (false).
• colors: Customizes thumb and track colors using SwitchDefaults.colors.
• thumbContent: Allows a custom composable for the thumb when checked.
• Accessibility: Ensure a 48dp touch target and use contentDescription for screen readers.

Theming Switches

Customize Switch appearance using MaterialTheme in Compose to define a custom color scheme or apply specific colors via SwitchDefaults.colors.

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color

@Composable
fun ThemedSwitchExample() {
    val checked = remember { mutableStateOf(false) }
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF1767D0)
        )
    ) {
        Switch(
            checked = checked.value,
            onCheckedChange = { checked.value = it }
        )
    }
}
    

FAQ

What is a Switch component?

A toggleable component with a thumb and track, used to switch between two states like enabling/disabling features.

---

Which composable is used for a Switch?

Use Switch for a standard Switch component.

---

How to make Switches accessible?

Use contentDescription for screen readers and ensure a 48dp touch target.

---

Can I customize Switch colors?

Yes, via SwitchDefaults.colors for thumb and track, or a custom MaterialTheme.colorScheme.

---

What is the minimum SDK required?

API level 21 (Android 5.0).