Switch
Composable Component
Switch
provides an animated switch for use as a toggle control in ToggleChip
or
SplitToggleChip
.
Android
@Composable
public fun Switch(
checked: Boolean,
modifier: Modifier = Modifier,
colors: SwitchColors = SwitchDefaults.colors(),
enabled: Boolean = true,
onCheckedChange: ((Boolean) -> Unit)? = null,
interactionSource: MutableInteractionSource? = null,
): Unit
Parameters
checked | Boolean flag indicating whether this switch is currently toggled on. |
modifier | Modifier to be applied to the switch. This can be used to provide a content description for accessibility. |
colors | SwitchColors from which the colors of the thumb and track will be obtained. |
enabled | Boolean flag indicating the enabled state of the Switch (affects the color). |
onCheckedChange | Callback to be invoked when Switch is clicked. If null, then this is passive and relies entirely on a higher-level component to control the state (such as ToggleChip or SplitToggleChip ). |
interactionSource | When also providing onCheckedChange , an optional hoisted MutableInteractionSource for observing and emitting Interaction s for this switch. You can use this to change the switch's appearance or preview the switch in different states. Note that if null is provided, interactions will still happen internally. |
Code Examples
ToggleChipWithSwitch
@Composable
fun ToggleChipWithSwitch() {
var checked by remember { mutableStateOf(true) }
// The primary label should have a maximum 3 lines of text
// and the secondary label should have max 2 lines of text.
ToggleChip(
label = { Text("SwitchIcon", maxLines = 3, overflow = TextOverflow.Ellipsis) },
secondaryLabel = {
Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
},
checked = checked,
// For Switch toggle controls the Wear Material UX guidance is to set the
// unselected toggle control color to ToggleChipDefaults.switchUncheckedIconColor()
// rather than the default.
colors =
ToggleChipDefaults.toggleChipColors(
uncheckedToggleControlColor = ToggleChipDefaults.SwitchUncheckedIconColor
),
toggleControl = { Switch(checked = checked, enabled = true) },
onCheckedChange = { checked = it },
appIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
contentDescription = "airplane",
modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
)
},
enabled = true,
)
}
Create your own Component Library
Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled