Select

Default

Day	Night

Dropdown width

The width of the dropdown can be one of either MaxWidth, MatchOptionWidth, or MatchSelectWidth. Max width allows the options to expand to the full width of the screen. Match Option width allows the options to expand as far as they need without ellipsis, which can be narrower than the Select it belongs to. Match Select width means the options will be as wide as the parent Select's width which can lead to truncation.

Width	Day	Night
MaxWidth
MatchOptionWidth
MatchSelectWidth

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a Select:

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.select.BpkSelect
                                                
                                                BpkSelect(
                                                    modifier = modifier.widthIn(min = BpkSpacing.Xxl.times(5)),
                                                    options = arrayListOf("Karachi", "Lahore", "Faisalabad", "Islamabad", "Quetta", "Peshawar", "Menu item", "Menu item"),
                                                    selectedIndex = -1,
                                                    placeholder = "Select",
                                                    status = BpkSelectState.Default,
                                                    onSelectionChange = {},
                                                )

or

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.select.BpkSelect
                                                
                                                BpkSelect(
                                                    modifier = modifier.widthIn(min = BpkSpacing.Xxl.times(5)),
                                                    options = arrayListOf("Karachi", "Lahore", "Faisalabad", "Islamabad", "Quetta", "Peshawar", "Menu item", "Menu item"),
                                                    selectedIndex = 2,
                                                    placeholder = "Select",
                                                    status = BpkFieldStatus.Disabled,
                                                    onSelectionChange = {},
                                                )

or

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.select.BpkSelect
                                                
                                                BpkSelect(
                                                    modifier = modifier.widthIn(min = BpkSpacing.Xxl.times(5)),
                                                    options = arrayListOf("Karachi", "Lahore", "Faisalabad", "Islamabad", "Quetta", "Peshawar", "Menu item", "Menu item"),
                                                    selectedIndex = 0,
                                                    placeholder = "Select",
                                                    status = BpkFieldStatus.Error("Error text"),
                                                    onSelectionChange = {},
                                                )

if you want to use select component and a custom container instead of dropdown list for options, then you can use another api without options.

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.select.BpkSelect
                                                
                                                BpkSelect(
                                                    modifier = modifier.widthIn(min = BpkSpacing.Xxl.times(5)),
                                                    text = "Menu item",
                                                    placeholder = "Select",
                                                    status = BpkFieldStatus.Default,
                                                    onClick = {}
                                                )