ChipsList

Chips Lists can be used in 2 ways:

1. Filter Chips List: filter the screen's content while presenting the filtering options in a compact format.

2. Tags Chips List: visually display tags to give users quick access to their categories.

Overview

Usage Examples

Filter Chips ListFilter Chips List provides selectable chips for filtering content.

Tags Chips ListThe Tags Chips List visually displays tags and allows quick access to their categories. Tags can be editable, featuring an 'X' to remove them, and may include an action button (e.g., to add or reset the list).

Types

Filter Chips List

Property	Component
Single Select (default) Only one chip can be selected at a time, automatically deselecting any previously selected chip.
Multi Select Multiple chips can be selected simultaneously, allowing for a combination of choices.

Tags Chips List

Property	Component
Default
Editable [isRemovable]

Accessories

Filter Chips List

Property	Single Chip Example
Counter Suffix
Badge Suffix
Icon Prefix/Suffix
Avatar Prefix

Tags Chips List

Property	Component
Additional Chips Indicator By default, we display all tags without limitation. However, in cases where we want to limit the amount of tags displayed (e.g. 2-3 lines)- a "+x more" link button should appear to indicate there are additional tags.
Add New When allowing users to add their own tags, include an "Add New" button.

Behaviour

Tapping on a cropped chipWhen a cropped chip is tapped, it becomes active and scrolls into view, ensuring there is a 40px padding between the active chip and the edge of the screen.

Loading a page of a chip that is not in the visible areaWhen a page opens with an active chip that’s off-screen, the chip bar scrolls to position it with 40px padding from the screen’s edge.

Spec

Filter Chips List

Tags Chips List

Dev

UsageCode Example

<ChipsList
  chips={chips}
  action={action}
  onSelectionChange={onSelectionChange}
  onRemoval={onRemoval}
  containerStyle={styles.container}
/>

APIThis is the list of additional props for the component

action

ButtonProps

Renders a button for a custom action

backgroundColor

string

ChipsList background color (will also give background to the gradient)

chipItemProps

ChipsListItemProps

The chip item's props which will override and affect ALL chip items inside the list

chips

ChipsListItemProps[]

The array of chips which make up the list

containerStyle

ViewStyle

Additional style to the container

keyExtractor

(item: any, index: number) => string

Custom key extractor

numberOfRows

number

Limits the number of visible rows

onRemoval

(newChipsList: ChipsListProps['chips'], removedItem: ChipsListItemProps, removedItemIndex: number) => void

Callback triggered when an item is removed from the chips array via dismiss. Forwards the new items list and removed item (for 'removable' items, when the type is 'tags')

onSelectionChange

(selectedItem: ChipsListItemProps, selectedItemIndex: number, prevSelectedItemIndex: number) => void

Callback triggered when a new item is selected, returning the selected item and index

selectionMode

single | multi

Selection mode type (only when the 'type' prop is 'filter'). Default is single

testID

string

Component Test id

testID

string

The component test idUse `testID.scroll` for the ScrollBar scrollView.

type

ChipsListType ('filter' | 'tags')

The ChipsList type. Default is tags