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

Toggle

@JvmName(name = "ToggleWithLabel")
@Composable
fun Toggle(toggleOptions: List<ToggleItem.Text>, modifier: Modifier = Modifier, selectedIndex: Int = 0, fluidState: Boolean = false, onSelect: (index: Int) -> Unit)

Toggle component is a control that allows a single selection of a list of mutually exclusive options. The component comes with a predefined appearance based on Skapa design and guidelines.

Toggle component is built in two variants, which relies on ToggleItem to create a list and direct the content of the Toggle. The ToggleItem consists of ToggleItem.Text and ToggleItem.Icon data classes which contain the content to be displayed in each section of the Toggle component.

Toggles should be associated with either a label or an icon, not both. Toggle component is created in two variant functions to refrain from mixing.

Parameters

toggleOptions

list of ToggleItem.Text data class which contain relevant content information.

modifier

Modifier to be applied to the toggle layout.

selectedIndex

boolean state for toggle section selection: either it is selected or not.

fluidState

boolean state determining if the component is to grow to fill max width or wrap to content.

onSelect

callback to be invoked when the Toggle is being clicked.

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.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Toggle
import net.ikea.skapa.ui.components.ToggleItem

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsLabel = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true)
        )
        val itemsLabelMulti = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = false)
        )
        Toggle(toggleOptions = itemsLabel, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, selectedIndex = selectedLabel) {
            selectedLabel = it
        }
        Toggle(toggleOptions = itemsLabel, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
} 
   //sampleEnd
}
import android.content.res.Configuration
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Toggle
import net.ikea.skapa.ui.components.ToggleItem

fun main() { 
   //sampleStart 
   SkapaThemeM3 {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsIcon = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        val itemsIconMulti = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        Toggle(toggleOptions = itemsIcon, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIcon, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
} 
   //sampleEnd
}
@JvmName(name = "ToggleWithIcon")
@Composable
fun Toggle(toggleOptions: List<ToggleItem.Icon>, modifier: Modifier = Modifier, selectedIndex: Int = 0, fluidState: Boolean = false, onSelect: (index: Int) -> Unit)

Toggle component is a control that allows a single selection of a list of mutually exclusive options. The component comes with a predefined appearance based on Skapa design and guidelines.

Toggle component is built in two variants, which relies on ToggleItem to create a list and direct the content of the Toggle. The ToggleItem consists of ToggleItem.Text and ToggleItem.Icon data classes which contain the content to be displayed in each section of the Toggle component.

Toggles should be associated with either a label or an icon, not both. Toggle component is created in two variant functions to refrain from mixing.

Parameters

toggleOptions

list of ToggleItem.Icon data class which contain relevant content information.

modifier

Modifier to be applied to the toggle layout.

selectedIndex

state for toggle section selection: either it is selected or not.

fluidState

boolean state determining if the component is to grow to fill max width or wrap to content.

onSelect

callback to be invoked when the Toggle is being clicked.

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.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Toggle
import net.ikea.skapa.ui.components.ToggleItem

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsLabel = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true)
        )
        val itemsLabelMulti = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = false)
        )
        Toggle(toggleOptions = itemsLabel, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, selectedIndex = selectedLabel) {
            selectedLabel = it
        }
        Toggle(toggleOptions = itemsLabel, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
} 
   //sampleEnd
}
import android.content.res.Configuration
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Toggle
import net.ikea.skapa.ui.components.ToggleItem

fun main() { 
   //sampleStart 
   SkapaThemeM3 {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsIcon = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        val itemsIconMulti = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        Toggle(toggleOptions = itemsIcon, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIcon, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
} 
   //sampleEnd
}