Chip group

A row of chip components to allow travellers to filter options

ChipGroup

Maven Central Class reference Source code

Single Select Rail

Day Night
SingleSelect Rail Chip Group component SingleSelect Rail Chip Group component - dark mode

Single Select Wrap

Day Night
SingleSelect Wrap Chip Group component SingleSelect Wrap Chip Group component - dark mode

Multi Select Rail

Day Night
MultiSelect Rail Chip Group component MultiSelect Rail Chip Group component - dark mode

Multi Select Rail Without Sticky Chip

Day Night
MultiSelect Rail Chip Group with no Sticky Chip component MultiSelect Rail Chip Group with no Sticky Chip component - dark mode

Multi Select Wrap

Day Night
Multi Select Wrap Chip Group component MultiSelect Wrap Chip Group component - dark mode

Installation

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

Usage

Example of a Rail SingleSelectChipGroup:


                                                
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleSelectChipGroup
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipGroupType
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipItem
                                                
                                                var selectedIndex by remember { mutableStateOf(0) }
                                                
                                                BpkSingleSelectChipGroup(
                                                    chips = listOf(BpkSingleChipItem("City", BpkIcon.Deals)),
                                                    selectedIndex = selectedIndex,
                                                    onItemClicked = {/*on click */},
                                                    type = BpkSingleChipGroupType.Rail,
                                                )

Example of a Wrap SingleSelectChipGroup:


                                                
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleSelectChipGroup
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipGroupType
                                                import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipItem
                                                
                                                var selectedIndex by remember { mutableStateOf(0) }
                                                
                                                BpkSingleSelectChipGroup(
                                                    chips = listOf(BpkSingleChipItem("City", BpkIcon.Deals)),
                                                    selectedIndex = selectedIndex,
                                                    onItemClicked = {/*on click */},
                                                    type = BpkSingleChipGroupType.Wrap,
                                                )

Example of a Rail MultiSelectChipGroup Without Sticky Chip:


                                                
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
                                                
                                                // This is just for demonstration purposes, You should get this list from ViewModel
                                                
                                                val chips = listOf(
                                                    BpkMultiChipItem(
                                                        text = "City1",
                                                        type = BpkChipType.Selectable
                                                    ) { /* handle click*/ },
                                                    BpkMultiChipItem(
                                                        text = "City2",
                                                        type = BpkChipType.Selectable,
                                                        selected = true,
                                                        icon = BpkIcon.Heart
                                                    ) { /* handle click*/ }
                                                )
                                                BpkMultiSelectChipGroup(
                                                    chips = chips,
                                                    type = BpkMultiChipGroupType.Rail(),
                                                )

Example of a Rail MultiSelectChipGroup With Sticky Chip:


                                                
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkStickyChipItem
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
                                                import net.skyscanner.backpack.compose.chip.BpkChipType
                                                
                                                // This is just for demonstration purposes, You should get this list from ViewModel
                                                
                                                val chips = listOf(
                                                    BpkMultiChipItem(
                                                        text = "City1",
                                                        type = BpkChipType.Selectable
                                                    ) { /* handle click*/ },
                                                    BpkMultiChipItem(
                                                        text = "City2",
                                                        type = BpkChipType.Selectable,
                                                        selected = true,
                                                        icon = BpkIcon.Heart
                                                    ) { /* handle click*/ }
                                                )
                                                
                                                BpkMultiSelectChipGroup(
                                                    chips = chips,
                                                    type = BpkMultiChipGroupType.Rail(
                                                        BpkStickyChipItem(
                                                            text = stringResource(R.string.sticky_chip),
                                                            icon = BpkIcon.Filter,
                                                        ) {
                                                            /*on click */
                                                        },
                                                    ),
                                                )

Example of a Wrap MultiSelectChipGroup:


                                                
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
                                                import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
                                                import androidx.lifecycle.compose.collectAsStateWithLifecycle
                                                
                                                // This is just for demonstration purposes, You should get this list from ViewModel
                                                
                                                val chips = listOf(
                                                    BpkMultiChipItem(
                                                        text = "City1",
                                                        type = BpkChipType.Selectable
                                                    ) { /* handle click*/ },
                                                    BpkMultiChipItem(
                                                        text = "City2",
                                                        type = BpkChipType.Selectable,
                                                        selected = true,
                                                        icon = BpkIcon.Heart
                                                    ) { /* handle click*/ }
                                                )
                                                
                                                BpkMultiSelectChipGroup(
                                                    chips = chips,
                                                    type = BpkMultiChipGroupType.Wrap,
                                                )