ChipGroup

Single Select Rail

Day	Night

Single Select Wrap

Day	Night

Multi Select Rail

Day	Night

Multi Select Rail Without Sticky Chip

Day	Night

Multi Select Wrap

Day	Night

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,
                                                )