Switch

Binary switches for immediate on and off settings.

Use switches for settings that change state immediately.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.composables.ui.components.Switch
import com.composables.ui.components.Text

@Composable
fun SwitchExample() {
    var checked by remember { mutableStateOf(true) }
    Switch(checked = checked, onCheckedChange = { checked = it }) {
        Text("Notifications")
    }
}

Installation

implementation("com.composables:ui:0.1.0")

Add the required dependencies

implementation("com.composables:composeunstyled:2.7.0")

Copy and paste the following sources into your project

components/Switch.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.alphas
import com.composables.ui.theme.colors
import com.composables.ui.theme.disabledAlpha
import com.composables.ui.theme.ringColor
import com.composables.ui.theme.onPanelColor
import com.composables.ui.theme.switchSelectedTrackColor
import com.composables.ui.theme.switchThumbColor
import com.composables.ui.theme.switchTrackColor
import com.composeunstyled.FocusRingVisibility
import com.composeunstyled.ProvideContentColor
import com.composeunstyled.Thumb
import com.composeunstyled.Track
import com.composeunstyled.UnstyledSwitch
import com.composeunstyled.buildModifier
import com.composeunstyled.theme.Theme

/**
 * A binary switch for settings that change immediately.
 * @param checked Whether the switch is currently on.
 * @param onCheckedChange Called when the checked state changes.
 * @param modifier Modifier applied to the switch row.
 * @param enabled Whether the switch can be interacted with.
 * @param interactionSource Interaction source used for focus and press state.
 * @param content Optional label or supporting content displayed next to the switch.
 */
@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    accessibilityLabel: String? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: (@Composable RowScope.() -> Unit)? = null,
) {
    val trackShape = RoundedCornerShape(999.dp)
    val trackColor by animateColorAsState(
        if (checked) Theme[colors][switchSelectedTrackColor] else Theme[colors][switchTrackColor]
    )

    UnstyledSwitch(
        checked = checked,
        onCheckedChange = onCheckedChange,
        enabled = enabled,
        interactionSource = interactionSource,
        modifier = modifier
            .then(buildModifier {
                accessibilityLabel?.let { label ->
                    add(Modifier.semantics { contentDescription = label })
                }
            })
            .alpha(if (enabled) 1f else Theme[alphas][disabledAlpha]),
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Track(
                modifier = Modifier
                    .focusRing(
                        interactionSource = interactionSource,
                        color = Theme[colors][ringColor],
                        shape = trackShape,
                        visibility = FocusRingVisibility.Focused,
                    )
                    .background(trackColor, trackShape)
                    .border(Dp.Hairline, Theme[colors][ringColor], trackShape)
                    .size(width = 44.dp, height = 24.dp)
                    .padding(2.dp),
            ) {
                Thumb(animationSpec = spring()) {
                    Box(
                        Modifier
                            .size(20.dp)
                            .background(Theme[colors][switchThumbColor], CircleShape)
                            .border(Dp.Hairline, Theme[colors][ringColor], CircleShape),
                    )
                }
            }
            if (content != null) {
                ProvideContentColor(Theme[colors][onPanelColor]) {
                    content()
                }
            }
        }
    }
}

components/Utils.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.colors
import com.composables.ui.theme.ringColor
import com.composeunstyled.FocusRingVisibility
import com.composeunstyled.collectIsFocusVisibleAsState
import com.composeunstyled.outline
import com.composeunstyled.theme.Theme

@Composable
fun Modifier.focusRing(
    interactionSource: InteractionSource,
    width: Dp = 2.dp,
    color: Color = Theme[colors][ringColor],
    shape: Shape = RectangleShape,
    offset: Dp = 0.dp,
    visibility: FocusRingVisibility = FocusRingVisibility.FocusVisible,
): Modifier {
    val showFocusRing by if (visibility == FocusRingVisibility.FocusVisible) {
        interactionSource.collectIsFocusVisibleAsState()
    } else {
        interactionSource.collectIsFocusedAsState()
    }
    val animatedWidth by animateDpAsState(
        targetValue = if (showFocusRing) width else 0.dp,
        animationSpec = tween(durationMillis = 120),
        label = "FocusRingWidth",
    )

    return this then Modifier.outline(
        width = animatedWidth,
        color = color,
        shape = shape,
        offset = offset,
    )
}

@Composable
fun Modifier.bouncyPress(
    interactionSource: InteractionSource,
    enabled: Boolean = true,
    pressedScale: Float = 0.98f,
): Modifier {
    val pressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (enabled && pressed) pressedScale else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMediumLow,
        ),
        label = "BouncyPressScale",
    )

    return this then Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
}

Examples

Disabled

ExpandCollapseView on GitHub

import androidx.compose.runtime.Composable
import com.composables.ui.components.Switch
import com.composables.ui.components.Text

@Composable
fun DisabledSwitchExample() {
    Switch(checked = true, onCheckedChange = {}, enabled = false) {
        Text("Notifications")
    }
}

API Reference

A binary switch for settings that change immediately.

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    accessibilityLabel: String? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: (@Composable RowScope.() -> Unit)? = null,
)

Parameter	Type	Description
`checked`	`Boolean`	Whether the switch is currently on.
`onCheckedChange`	`(Boolean) -> Unit`	Called when the checked state changes.
`modifier`	`Modifier`	Modifier applied to the switch row.
`enabled`	`Boolean`	Whether the switch can be interacted with.
`accessibilityLabel`	`String?`
`interactionSource`	`MutableInteractionSource`	Interaction source used for focus and press state.
`content`	`(@Composable RowScope.() -> Unit)?`	Optional label or supporting content displayed next to the switch.

Switch

Installation

Gradle

Copy & Paste

Add the required dependencies

Copy and paste the following sources into your project

Examples

Disabled

API Reference

Switch