Merge Chips
Filter chips with counts whose adjacent selections fuse into one continuous pill, built on Radix ToggleGroup.
Preview
Sprint 14 board
Pick neighbours and they fuse into one key.
22 issues · 2 people
Assignee
Kind
Status
Sort by
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: T; label: ReactNode; count?: number; disabled?: boolean }[] | - | Chips in display order. Required. |
| value | T[] | - | Controlled selection; at most one item in single mode. |
| defaultValue | T[] | [] | Uncontrolled initial selection. |
| onValueChange | (value: T[]) => void | - | Called with the new selection, in option order. |
| type | "multiple" | "single" | "multiple" | Single keeps at most one chip selected and slides the tint instead of merging. |
| merge | boolean | true | Fuse adjacent selected chips into one pill; false keeps them separate. |
| size | "sm" | "md" | "md" | Chip height, padding, text and badge size. |
| disabled | boolean | false | Disable every chip. |
| loop | boolean | true | Arrow keys wrap from the last chip to the first. |
| dir | "ltr" | "rtl" | - | Reading direction for arrow-key navigation. |
| className | string | - | Merged onto the root group. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.