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

Select

fun <T> Select(hint: String, label: String, selectItemsParams: SelectItemsParams<T>, expanded: Boolean, onClick: (Boolean) -> Unit, onClickContentDescription: String?, modifier: Modifier = Modifier, @DrawableRes iconId: Int? = null, helperText: String? = null, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, state: BaseField.State = BaseField.State.Default)

Select enables users to display and choose an option within a set of given SelectItemsParams.items that are display as specified in SelectItemsParams.itemContent function. Whenever the user select an option, SelectItemsParams.onItemSelected is called with the selected item as parameter.

Parameters

hint

text shown when any option is selected.

label

the label to be displayed above the text field.

selectItemsParams

SelectItemsParams set of parameter related with the options to the expanded component

expanded

either if the select options are expanded or not

onClick

action triggered when select component is clicked. Here you should change expanded state to true if you want to display the options

onClickContentDescription

custom message to describe click action when talk back is active. "Will replace the default message "Double tap to activate"

modifier

Modifier to be applied to the Select.

iconId

Resources object to query the image file from.

helperText

Helper text conveys additional guidance about the input field. If the input has an error or success message, it should replace the helper text once displayed.

enabled

whether the component is enabled or grayed out.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Component.

state

BaseField.State use to set the state as Error, Success or Warning to display the component with proper UI colors. The default value is BaseField.State.Default.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.BaseField
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.Select
import net.ikea.skapa.ui.components.SelectInteractionParams
import net.ikea.skapa.ui.components.SelectItemsParams

fun main() { 
   //sampleStart 
   SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column {
        // Simple Select setup
        var displayValue by remember { mutableStateOf("Choose an option") }
        var listExpanded by remember { mutableStateOf(false) }
        Select(
            hint = displayValue,
            label = "Label",
            selectItemsParams = SelectItemsParams(
                onItemSelected = {
                    displayValue = it
                    listExpanded = false
                },
                items = listOf("Option 1, Option 2, Option, 3"),
                itemContent = { item ->
                    Text(
                        text = item,
                        fontWeight = if (displayValue == item) FontWeight.W900 else null
                    )
                },
                // Set itemContentPadding if you need to modify padding inside menu
                // itemContentPadding = PaddingValues(0.dp),
                // Set fluidMenu to true if you want the menu to have same width as the Select
                // fluidMenu = true,
                onDismissRequest = { listExpanded = false }
            ),
            expanded = listExpanded,
            onClick = {
                // Change expanded state to show the menu
                listExpanded = true
            },
            onClickContentDescription = null
        )
        // More custom Select setup
        var displayValueTwo by remember { mutableStateOf("Choose an option") }
        var listExpandedTwo by remember { mutableStateOf(false) }
        val state by remember { mutableStateOf(BaseField.State.Default) }
        Select(
            hint = displayValueTwo,
            selectItemsParams = SelectItemsParams(
                onItemSelected = {
                    displayValueTwo = it
                    listExpandedTwo = false
                },
                items = listOf("Option 1, Option 2, Option, 3"),
                itemContent = { item ->
                    Text(
                        text = item,
                        fontWeight = if (displayValueTwo == item) FontWeight.W900 else null
                    )
                },
                onDismissRequest = { listExpandedTwo = false }
            ),
            expanded = listExpandedTwo,
            onClick = { listExpandedTwo = true },
            iconId = R.drawable.ic_image_fallback_image, // Decorative icon can be added
            label = "Select",
            onClickContentDescription = "Choose an option",
            helperText = "Helper text", // helperText message need to adjust to the state
            state = state
        )
        data class IkeaStore(val id: Int, val name: String, val address: String)
        // Select options
        val stores = listOf(
            IkeaStore(
                id = 17,
                name = "Brooklyn",
                address = "1 Beard Street Brooklyn, NY 11231"
            ),
            IkeaStore(
                id = 18,
                name = "Elizabeth",
                address = "1000 IKEA Drive Elizabeth, NJ 07201"
            ),
            IkeaStore(
                id = 19,
                name = "Hicksville New York (Long Island)",
                address = "1100 Broadway Mall Hicksville NY, 11801"
            ),
            IkeaStore(
                id = 20,
                name = "Haven",
                address = "450 Sargent Drive New Haven, CT 06511"
            )
        )
        // Set the preselected value, can be any type <T>
        val selectedValue = stores.first()
        // Hint or Display value needs to be a String
        var displayValueThree by remember { mutableStateOf(selectedValue.name) }
        var expanded by remember { mutableStateOf(false) }
        Select(
            placeholder = "Choose an option",
            value = displayValueThree,
            selectItemsParams = SelectItemsParams(
                onItemSelected = { store ->
                    displayValueThree = store.name
                    expanded = false
                },
                items = stores,
                itemContent = { store ->
                    ListViewItem(title = store.name, description = store.address, onClick = null)
                },
                onDismissRequest = { expanded = false },
                // Use selectedItem parameter to indicated the preselected selected Item
                selectedItem = selectedValue
            ),
            selectInteractionParams = SelectInteractionParams(
                onClick = { expanded = true },
                onClickContentDescription = "Choose an option",
                enabled = true
            ),
            label = "Select",
            expanded = expanded,
            iconId = R.drawable.ic_image_fallback_image,
            modifier = Modifier.fillMaxWidth()
        )
    }
} 
   //sampleEnd
}

@Composable

fun <T> Select(placeholder: String, label: String, value: String?, selectItemsParams: SelectItemsParams<T>, selectInteractionParams: SelectInteractionParams, expanded: Boolean, modifier: Modifier = Modifier, @DrawableRes iconId: Int? = null, helperText: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, state: BaseField.State = BaseField.State.Default)

Parameters

placeholder

text display when there is not selection.

value

text shown when any option is selected.

label

the label to be displayed above the text field.

selectItemsParams

SelectItemsParams set of parameter related with the options to the expanded component

selectInteractionParams

SelectInteractionParams set of parameters that control click interaction.

expanded

either if the select options are expanded or not

modifier

Modifier to be applied to the Select.

iconId

Resources object to query the image file from.

helperText

Helper text conveys additional guidance about the input field. If the input has an error or success message, it should replace the helper text once displayed.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this Component.

state

BaseField.State use to set the state as Error, Success or Warning to display the component with proper UI colors. The default value is BaseField.State.Default.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.BaseField
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.Select
import net.ikea.skapa.ui.components.SelectInteractionParams
import net.ikea.skapa.ui.components.SelectItemsParams

fun main() { 
   //sampleStart 
   SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column {
        // Simple Select setup
        var displayValue by remember { mutableStateOf("Choose an option") }
        var listExpanded by remember { mutableStateOf(false) }
        Select(
            hint = displayValue,
            label = "Label",
            selectItemsParams = SelectItemsParams(
                onItemSelected = {
                    displayValue = it
                    listExpanded = false
                },
                items = listOf("Option 1, Option 2, Option, 3"),
                itemContent = { item ->
                    Text(
                        text = item,
                        fontWeight = if (displayValue == item) FontWeight.W900 else null
                    )
                },
                // Set itemContentPadding if you need to modify padding inside menu
                // itemContentPadding = PaddingValues(0.dp),
                // Set fluidMenu to true if you want the menu to have same width as the Select
                // fluidMenu = true,
                onDismissRequest = { listExpanded = false }
            ),
            expanded = listExpanded,
            onClick = {
                // Change expanded state to show the menu
                listExpanded = true
            },
            onClickContentDescription = null
        )
        // More custom Select setup
        var displayValueTwo by remember { mutableStateOf("Choose an option") }
        var listExpandedTwo by remember { mutableStateOf(false) }
        val state by remember { mutableStateOf(BaseField.State.Default) }
        Select(
            hint = displayValueTwo,
            selectItemsParams = SelectItemsParams(
                onItemSelected = {
                    displayValueTwo = it
                    listExpandedTwo = false
                },
                items = listOf("Option 1, Option 2, Option, 3"),
                itemContent = { item ->
                    Text(
                        text = item,
                        fontWeight = if (displayValueTwo == item) FontWeight.W900 else null
                    )
                },
                onDismissRequest = { listExpandedTwo = false }
            ),
            expanded = listExpandedTwo,
            onClick = { listExpandedTwo = true },
            iconId = R.drawable.ic_image_fallback_image, // Decorative icon can be added
            label = "Select",
            onClickContentDescription = "Choose an option",
            helperText = "Helper text", // helperText message need to adjust to the state
            state = state
        )
        data class IkeaStore(val id: Int, val name: String, val address: String)
        // Select options
        val stores = listOf(
            IkeaStore(
                id = 17,
                name = "Brooklyn",
                address = "1 Beard Street Brooklyn, NY 11231"
            ),
            IkeaStore(
                id = 18,
                name = "Elizabeth",
                address = "1000 IKEA Drive Elizabeth, NJ 07201"
            ),
            IkeaStore(
                id = 19,
                name = "Hicksville New York (Long Island)",
                address = "1100 Broadway Mall Hicksville NY, 11801"
            ),
            IkeaStore(
                id = 20,
                name = "Haven",
                address = "450 Sargent Drive New Haven, CT 06511"
            )
        )
        // Set the preselected value, can be any type <T>
        val selectedValue = stores.first()
        // Hint or Display value needs to be a String
        var displayValueThree by remember { mutableStateOf(selectedValue.name) }
        var expanded by remember { mutableStateOf(false) }
        Select(
            placeholder = "Choose an option",
            value = displayValueThree,
            selectItemsParams = SelectItemsParams(
                onItemSelected = { store ->
                    displayValueThree = store.name
                    expanded = false
                },
                items = stores,
                itemContent = { store ->
                    ListViewItem(title = store.name, description = store.address, onClick = null)
                },
                onDismissRequest = { expanded = false },
                // Use selectedItem parameter to indicated the preselected selected Item
                selectedItem = selectedValue
            ),
            selectInteractionParams = SelectInteractionParams(
                onClick = { expanded = true },
                onClickContentDescription = "Choose an option",
                enabled = true
            ),
            label = "Select",
            expanded = expanded,
            iconId = R.drawable.ic_image_fallback_image,
            modifier = Modifier.fillMaxWidth()
        )
    }
} 
   //sampleEnd
}

Select

Parameters

See also

Samples

Parameters

See also

Samples