Design/net.ikea.skapa.ui.components/Switch

Switch

@Composable
fun Switch(checked: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: SwitchVariant = SwitchVariant.Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onCheckedChange: (Boolean) -> Unit?)

Switch is a binary control for turning a setting or feature 'on' or 'off' with immediate effect.

A switch's value always represents the current state of a setting or feature. Changing the switch value directly alters the application as soon as the value changes. It's built on top of androidx.compose.material.Switch and comes with predefined appearance based on Skapa design and guidelines.

A switch should be associated with a label. If a switch is used without one, it must strongly connect to another element that represents the value being selected.

Parameters

checked

whether or not this component is checked.

modifier

Modifier to be applied to the switch layout.

enabled

whether the component is enabled or grayed out.

variant

SwitchVariant defines the button style from Skapa Switch Variants. The default value is SwitchVariant.Emphasised.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Switch. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Switch in different Interactions.

onCheckedChange

callback to be invoked when Switch is being clicked, therefore the change of checked state is requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.

See also

Samples

import android.content.res.Configuration
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Switch
import net.ikea.skapa.ui.components.SwitchVariant

fun main() { 
   //sampleStart 
   var state by rememberSaveable { mutableStateOf(true) }
Switch(state) { state = it } 
   //sampleEnd
}
@Composable
fun Switch(label: String, checked: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: SwitchVariant = SwitchVariant.Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onCheckedChange: (Boolean) -> Unit?)

Switch is a binary control for turning a setting or feature 'on' or 'off' with immediate effect.

A switch's value always represents the current state of a setting or feature. Changing the switch value directly alters the application as soon as the value changes. It's built on top of androidx.compose.material.Switch and comes with predefined appearance based on Skapa design and guidelines.

A switch should be associated with a label. If a switch is used without one, it must strongly connect to another element that represents the value being selected.

Parameters

label

The text to be displayed together with Switch component.

checked

whether or not this component is checked.

modifier

Modifier to be applied to the switch layout.

enabled

whether the component is enabled or grayed out.

variant

SwitchVariant defines the button style from Skapa Switch Variants. The default value is SwitchVariant.Emphasised.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Switch. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Switch in different Interactions.

onCheckedChange

callback to be invoked when Switch is being clicked, therefore the change of checked state is requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.

See also

Samples

import android.content.res.Configuration
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Switch
import net.ikea.skapa.ui.components.SwitchVariant

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        var state by rememberSaveable { mutableStateOf(true) }
        Switch(label = "Switch Label", checked = state, variant = SwitchVariant.Emphasised) { state = it }
        Switch(label = "Switch Label", checked = state, variant = SwitchVariant.Subtle) { state = it }
        Switch(
            label = "When a Switch label exceeds one line the text overflows onto a second",
            checked = state,
            variant = SwitchVariant.Subtle
        ) { state = it }
        Switch(checked = true, enabled = false, variant = SwitchVariant.Emphasised) { state = it }
        Switch(checked = false, enabled = false, variant = SwitchVariant.Emphasised) { state = it }
        Switch(checked = true, enabled = false, variant = SwitchVariant.Subtle) { state = it }
        Switch(checked = false, enabled = false, variant = SwitchVariant.Subtle) { state = it }
    }
} 
   //sampleEnd
}