The following code should allow you to use a custom switch Composable with a nice slide animation build-in :) Hopy you enjoy! Oh and btw. this code was made for Jetpack Compose Desktop / Multiplatform so there may be a better alternative to this for normal Android Jetpack Compose. P.S replace the colors "Accent", "Strokes" etc. with your own colors. @Composable fun CustomSwitch( checked: Boolean, onCheckedChange: (Boolean) -> Unit, enabled: Boolean = true, modifier: Modifier = Modifier ) { val transition: Transition<Boolean> = updateTransition(targetState = checked, label = "SwitchTransition") val trackColor: Color by transition.animateColor(label = "SwitchTrackColorTransition") { isChecked -> if (isChecked) Accent else Strokes } val thumbColor: Color by transition.animateColor(label = "SwitchThumbColorTransition") { isChecked -> if (isChecked) TitleOnDarkBackground else TitleOnDarkBackground } val thumbPosition by animateFloatAsState( targetValue = if (checked) 1f else 0f, animationSpec = spring(Spring.DampingRatioLowBouncy, Spring.StiffnessLow) ) val padding = 4.dp val thumbDiameter = 24.dp - (padding * 2) val trackWidth = (thumbDiameter * 2) + (padding * 3) val trackHeight = thumbDiameter + (padding * 2) val thumbOffset = lerp(padding, (trackWidth - thumbDiameter - padding), thumbPosition) Box( modifier = modifier .width(trackWidth) .height(trackHeight) .clip(MaterialTheme.shapes.medium) .background(trackColor) .clickable(enabled) { onCheckedChange(!checked) }, contentAlignment = Alignment.CenterStart ) { Surface( modifier = Modifier .size(thumbDiameter) .offset(x = thumbOffset), color = thumbColor, shape = RoundedCornerShape(50) ) {} } }