Select

Default

Day	Night

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 = {}
                                                )