Switch

The Switch component allows users to toggle between two states (on/off). It provides visual feedback with customizable styles and supports both standalone switches and switches with accompanying text labels.

Usage

Basic example

// A simple switch in checked state
Switch(
    checked = true,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

// A simple switch in unchecked state
Switch(
    checked = false,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

Switch with different styles

// Primary style switch
Switch(
    style = SwitchStyle.PRIMARY,
    checked = true,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

// Secondary style switch
Switch(
    style = SwitchStyle.SECONDARY,
    checked = false,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

// Tertiary style switch
Switch(
    style = SwitchStyle.TERTIARY,
    checked = true,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

Disabled switch

// Disabled switch in checked state
Switch(
    checked = true,
    enabled = false,
    onCheckedChange = null,
)

// Disabled switch in unchecked state
Switch(
    checked = false,
    enabled = false,
    onCheckedChange = null,
)

Switch with text

// Switch with accompanying text label
SwitchWithText(
    text = "Enable notifications",
    checked = true,
    onCheckedChange = { isChecked -> /* Handle state change */ },
)

// Disabled switch with text
SwitchWithText(
    text = "Dark mode",
    checked = false,
    onCheckedChange = null,
)