Skip to content

Component

Switch

A FormaUI switch — a themed on/off toggle for a single setting.

dev.formaui.components.switch

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

var on by remember { mutableStateOf(false) }
FormaSwitch(
    checked = on,
    onCheckedChange = { on = it },
)

FormaSwitch

A stateless on/off toggle with hoisted checked state; pass onCheckedChange = null for a display-only switch toggled elsewhere.

checkedrequiredTypeBooleanDefaultrequiredDescriptionWhether the switch is on.
onCheckedChangerequiredType((Boolean) -> Unit)?DefaultrequiredDescriptionCalled with the new value when the user toggles the switch, or null to make the switch non-interactive.
modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the switch.
enabledTypeBooleanDefaulttrueDescriptionWhether the switch is interactive.
thumbContentType(@Composable () -> Unit)?DefaultnullDescriptionOptional slot drawn inside the thumb (e.g. a check icon when checked).
colorsTypeSwitchColors?DefaultnullDescriptionThe switch colors (defaults to the M3 defaults, themed by FormaTheme).
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionThe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.

Accessibility

The interactive control exposes a 48dp touch target via Material 3's minimum interactive component size; pass onCheckedChange = null to render a display-only switch whose toggling is handled elsewhere (e.g. by a click on an enclosing row).