Component

Switch

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

Themed defaults48dp target

import dev.formaui.components.switch.FormaSwitch

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

KOTLIN

12345var 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.

ParameterTypeDefaultDescription

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).

PreviousSwipeToDismiss Next TabRow