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

Dropdown

@Composable
fun Dropdown(hint: String, label: String, onClick: (Boolean) -> Unit, expanded: Boolean, onClickContentDescription: String?, modifier: Modifier = Modifier, helperText: String? = null, enabled: Boolean = true, selected: Boolean = false, active: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, state: BaseField.State = BaseField.State.Default)

Dropdown component can be used as a trigger for ListBox, Prompt, Sheet or other container components to display a list of options to choose

Parameters

hint

text shown when any option is selected.

label

the label to be displayed on top of the text field.

onClick

action triggered when select component is clicked.

expanded

either if the select options are expanded or not

onClickContentDescription

custom message to describe click action when talk back is active. If null will use default message "Double tap to activate".

modifier

Modifier to be applied to the BaseField.

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.

selected

whether an items was selected or not.

active

Select component should be in active state when options are 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.

See also

Samples

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
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.BaseField
import net.ikea.skapa.ui.components.Dropdown
import net.ikea.skapa.ui.components.ListBox
import net.ikea.skapa.ui.components.MenuItem
import net.ikea.skapa.ui.components.MenuItemImage

fun main() { 
   //sampleStart 
   var expanded by remember { mutableStateOf(false) }

var selectValue by remember { mutableStateOf("Choose an option") }
var itemsSelected by remember { mutableStateOf(false) }

val products = listOf(
    "Bathroom",
    "Bedroom",
    "Children's room",
    "Dining",
    "Garden",
    "Hallway",
    "IKEA for Business",
    "Kitchen"
)

// To use Dropdown and ListBox together they need to be wrapped in a box, to ensure ListBox correct positioning when expanded
Box {
    Dropdown(
        hint = selectValue,
        label = "Dropdown",
        onClick = {
            expanded = true
        },
        expanded = expanded,
        onClickContentDescription = "Choose an option",
        modifier = Modifier.fillMaxWidth(),
        helperText = "Use as trigger for select patterns",
        enabled = true,
        selected = itemsSelected,
        active = expanded,
        interactionSource = remember { MutableInteractionSource() },
        state = BaseField.State.Default
    )
    // You can bing Dropdown with ListBox, Prompt or Sheet depending of the use case
    // visit https://skapa.ikea.net/components/selection-and-inputs/selection-patterns:-android/ to check witch use case fits you better
    ListBox(
        expanded = expanded,
        items = products,
        onDismissRequest = { expanded = false },
        onItemClick = null,
        contentPadding = PaddingValues(),
        itemContent = {
            MenuItem(
                title = it,
                selected = it == selectValue,
                leadingImage = MenuItemImage.None, // You can afford a leading icon if you need it
                quantityLabel = null, // quantity Label in case is used as filter
                contentHorizontalPadding = SkapaSpacing.space150 // Modify the padding that fits your design
            ) {
                selectValue = it
                expanded = false
                itemsSelected = true
            }
        }
    )
} 
   //sampleEnd
}