Chip Group

Pro

A row of chips that filters a list: one picked or several, one tab stop and arrow keys. Reach for it where tabs would swap whole views but you only want to narrow one.

R-1042Broken streetlight on Vineopen
R-1045Parking permit renewalpending
R-1048Noise complaint, 4th flooropen
R-1051Pothole on Alta Streetclosed
R-1053Graffiti removal requestpending

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add chip-group

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Filtering by category is a Chip Group, not Tabs: tabs swap whole views, chips narrow the one in front of you. Give the group an aria-label that names what it filters.

Anatomy#

import { ChipGroup, ChipGroupItem } from "@/components/ui/chip-group"

<ChipGroup>
  <ChipGroupItem />
</ChipGroup>

Several at once#

With type="multiple" each chip toggles on its own and the value is a list. Acolor on an item adds its dot and tints the pick.

1 of 4 departments

Check indicator#

With indicator="check" a filled check opens in front of every picked chip and folds away when it is let go. Reach for it in multiple groups and outline chips, where the pick should read at a glance, not only through the fill.

Clearing the pick#

A single group keeps one chip picked. When “nothing picked” means “show everything”, setallowEmpty and pressing the picked chip clears it, so no All chip is needed.

Showing everything

Variants#

Disabled#

API reference#

Every part accepts className, merged last.

ChipGroup

The filter row. Built on Radix Toggle Group: one tab stop, the arrows move between chips, Space and Enter pick.

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	One value, or a list of values.
value	string \| string[]	-	The picked chip, or chips with `type="multiple"`. Controlled.
defaultValue	string \| string[]	"" \| []	The starting pick while uncontrolled.
onValueChange	(value: string \| string[]) => void	-	Called with the new pick.
allowEmpty	boolean	false	Single only. Pressing the picked chip clears it. Off, one chip always stays picked, so lead with an All chip.
variant	"soft" \| "outline"	"soft"	Passed to every item.
tone	ChipProps["tone"]	"neutral"	Passed to every item. Neutral picks in ink, never brand.
indicator	"none" \| "check"	"none"	`check` opens a filled check in front of every picked chip, so the pick reads without relying on fill alone.
wrap	boolean	true	Chips flow onto new lines; `false` holds one row.
orientation	"horizontal" \| "vertical"	"horizontal"	Which arrows move.
loop	boolean	true	The arrows wrap at the ends.
disabled	boolean	false	Disables every chip.

Data attribute	Description
data-slot="chip-group"	On the root.

ChipGroupItem

One chip in the group. Takes every Chip prop except selected, which the group sets, and may override the group's variant and tone. Chips in a group are always sm (24px, with a 40px hit area).

Prop	Type	Default	Description
value*	string	-	The value this chip stands for.
color	string	-	A free colour: a dot in front, and the pick washes in it.
indicator	"none" \| "check"	-	Overrides the group's indicator for this chip.
disabled	boolean	false	Skipped by the arrows.

Data attribute	Description
data-selected	On the picked chip(s).
data-state="on" \| "off"	Set by Radix.

FAQ#

Tabs switch between views that have nothing in common. A Chip Group narrows one list or grid by a category. If the content below keeps its shape and only loses rows, it is a Chip Group.