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

Choice

@Composable
fun <T> Choice(items: List<ChoiceGroupItem<T>>, selected: T?, modifier: Modifier = Modifier, style: SelectionEmphasis = Emphasised, size: ChoiceSize = Large, onItemSelected: (item: ChoiceGroupItem<T>) -> Unit)

This is the grouped Composable function for Choice.

Choice component is a control that allows a single selection of a list of mutually exclusive options.

Choices have the same function as Radio Buttons, allowing a single selection of many options. The decision to use a Choice should come from the Choice component's unique ability to present each Choice in a customised layout. These layouts help accentuate important properties of the presented Choices, such as having images for visual assistance or typographic styling to highlight values. This component is built on top of a custom layout and comes with predefined appearance based on Skapa design and guidelines.

Choice selection should be associated with a label to represent the value being selected. An optional caption can be added to aid with additional information.

Parameters

items

A list of ChoiceGroupItem items to be displayed in the same selectable group.

selected

A unique id of the selected Choice item in this group.

modifier

Modifier to be applied to the Choice Group layout.

style

SelectionEmphasis dictates the selected border color of the component. The default is SelectionEmphasis.Emphasised.

size

Sizes for Choice, affects the height of the component.

onItemSelected

callback to be invoked when a Choice item is selected.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Choice
import net.ikea.skapa.ui.components.ChoiceContent
import net.ikea.skapa.ui.components.ChoiceGroupItem
import net.ikea.skapa.ui.components.ChoiceSize
import net.ikea.skapa.ui.components.SelectionEmphasis

fun main() { 
   //sampleStart 
   // List of items to display in Choice list
val choiceItems = listOf(
    ChoiceGroupItem(key = "a", ChoiceContent(title = "Choice 1", caption = "Caption")),
    ChoiceGroupItem(key = "b", ChoiceContent(title = "Choice 2", caption = "Caption")),
    ChoiceGroupItem(key = "c", ChoiceContent(title = "Choice 3", caption = "Caption")),
    ChoiceGroupItem(key = "d", ChoiceContent(title = "Choice 4", caption = "Caption"))
)
SkapaTheme2(isSystemInDarkTheme()) {
    // Keep tracking the key of the selected Item
    var selected by remember { mutableStateOf<String?>(null) }
    Choice(
        // Point towards your ChoiceGroupItem list
        items = choiceItems,
        // Check if the current item is selected
        selected = selected,
        // Style options affect all items in the list
        style = SelectionEmphasis.Emphasised,
        // Size effects all items on the list
        size = ChoiceSize.Large,
        onItemSelected = {
            // Remember to update the selected item
            selected = it.key
        }
    )
} 
   //sampleEnd
}
@Composable
fun Choice(content: ChoiceContent, modifier: Modifier = Modifier, leadingContent: ChoiceLeadingContent = ChoiceLeadingContent.None, trailingContent: ChoiceTrailingContent = ChoiceTrailingContent.None, selected: Boolean = false, style: SelectionEmphasis = Emphasised, size: ChoiceSize = Large, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

This is the stand-alone Choice Composable, with this power comes great responsibility. This is only to be used if the list layout variant we provide isn't enough, and a custom layout is needed. Please follow guidelines available on Choice info and guidelines

Choice component is a control that allows a single selection of a list of mutually exclusive options.

Choices have the same function as Radio Buttons, allowing a single selection of many options. The decision to use a Choice should come from the Choice component's unique ability to present each Choice in a customised layout. These layouts help accentuate important properties of the presented Choices, such as having images for visual assistance or typographic styling to highlight values. This component is built on top of a custom layout and comes with predefined appearance based on Skapa design and guidelines.

Choice selection should be associated with a label to represent the value being selected. An optional caption can be added to aid with additional information.

Parameters

content

The content of the Choice item. Uses class CenterContent as the interface.

modifier

Modifier to be applied to the component layout.

leadingContent

Leading content for Choice: Icon, Payment Logo, or Image. Uses ChoiceLeadingContent.

trailingContent

Trailing content for Choice: Icon, Image, Text, or Price. Uses ChoiceTrailingContent.

selected

Boolean state for this component: either it is selected or not.

style

SelectionEmphasis dictates the selected border color of the component. If creating your own list using stand-alone Choice, keep the style uniform throughout the list. The default is SelectionEmphasis.Emphasised.

size

Sizes for Choice, affects the height of the component.

enabled

Controls the enabled state of the Choice. When false, this button will not be selectable and appears in the disabled ui state.

interactionSource

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

onClick

callback to be invoked when the component is being clicked.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Choice
import net.ikea.skapa.ui.components.ChoiceContent
import net.ikea.skapa.ui.components.ChoiceGroupItem
import net.ikea.skapa.ui.components.ChoiceSize
import net.ikea.skapa.ui.components.SelectionEmphasis

fun main() { 
   //sampleStart 
   // It's useful to have a way to track the selected item, one way to do it is by associating the options with a key value
data class GroupItem<T>(val key: T, val content: ChoiceContent, val enabled: Boolean = true)

val choiceItems = listOf(
    GroupItem(key = "a", ChoiceContent(title = "Choice 1", caption = "Caption")),
    GroupItem(key = "a", ChoiceContent(title = "Choice 2", caption = "Caption")),
    GroupItem(key = "a", ChoiceContent(title = "Choice 3", caption = "Caption")),
    GroupItem(key = "a", ChoiceContent(title = "Choice 4", caption = "Caption"), false)
)

SkapaTheme2(isSystemInDarkTheme()) {
    // Keep tracking the key of the selected Item
    var selected by remember { mutableStateOf<String?>(null) }
    // Check if the selected item corresponds with one of the items on the list
    val selectedItem = choiceItems.firstOrNull { it.key == selected } ?: choiceItems.first()
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space100)
            // Use selectableGroup modifier to semantically group a list of options
            .selectableGroup(),
        // As per Skapa Guidelines, keep the spacing between items to 16dp (SkapaSpacing.space100)
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        choiceItems.forEach { item ->
            Choice(
                content = item.content,
                // Check if the current item is selected
                selected = item.key == selectedItem.key,
                // Keep stylistic choices such as SelectionEmphasis uniform throughout list, do not mix Emphasised and Subtle
                style = SelectionEmphasis.Emphasised,
                // Keep sizing uniform throughout the list, do not mix sizes
                size = ChoiceSize.Large,
                // Remember to update the selected item
                onClick = { selected = item.key }
            )
        }
    }
} 
   //sampleEnd
}