KQ-161 · CHIP/CLOUD
Chip Cloud
A multi-select field split in two: a tray of what you have picked and a cloud of what is left. Picking a chip flies the very same pill out of the cloud and into the tray while the survivors close the gap; picking it again flies it home.
KQ-161 · CHIP/CLOUD
Calibration tags
1 picked: DampingPicked 1 of 8
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/chip-cloud
Props
- chips
- Chip[]
- default —
- The full roster; picked chips gather in the tray.
- value / defaultValue
- string[]
- default —
- Controlled or initial picks, in pick order.
- onValueChange
- (ids) => void
- default —
- Fires the picked ids whenever the set changes.
- label / placeholder
- ReactNode / string
- default —
- Group label, and the copy shown while the tray is empty.
| Prop | Type | Default | Description |
|---|---|---|---|
| chips | Chip[] | — | The full roster; picked chips gather in the tray. |
| value / defaultValue | string[] | — | Controlled or initial picks, in pick order. |
| onValueChange | (ids) => void | — | Fires the picked ids whenever the set changes. |
| label / placeholder | ReactNode / string | — | Group label, and the copy shown while the tray is empty. |