Chip
Compact choices that filter a list, or small removable values like people and labels. ChipGroup gathers filter chips under one name with arrow-key navigation.
Installation
Set up Camaleo once (Installation), then import what you need. The skin you load styles it.
import { Chip, ChipGroup } from "@camaleo/react";Anatomy
A filter chip is a toggle button with a check that shows while pressed. An input chip (with onRemove) is a span with a remove button at the end.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Showing 17 of 42 tickets
Filters with a count
Press the chips. Counts in the labels set expectations, and a role="status" line announces how many results are left.
Single selection
multiple={false} keeps one chip pressed at a time, but people can still unpress it. When an empty choice is not allowed, use a radio group.
Removable
Remove a label. onRemove turns the chip into an input chip, removeLabel names its button "Remove Urgent", and focus stays in the list instead of falling to the page body.
People, with an avatar
avatar takes a small Avatar. Its initials are decoration: the name in the chip and in removeLabel is what assistive tech reads.
On its own
A single Chip is a toggle with aria-pressed, good for one quick filter like "Only unread" above a list.
With an icon
An icon helps people scan a long set. Mark it data-slot="icon" and aria-hidden; the text still carries the meaning.
Archived tickets can't be filtered while the yearly cleanup runs.
Disabled, with a reason
Arrow keys skip a disabled chip. Say why it is off in text linked with aria-describedby, or people think the filter is broken.
In context
Chips sit above results, inside filter panels and in share dialogs. These are whole pieces of UI you can copy, in the skin you picked.
Filter homes
Lisbon · Nov 14 – Nov 18 · 2 guests
Amenities
Bedrooms
Share “Q3 revenue”
People you add can view and comment.
People with access
- ASAna Souza
- MLMarcus Lee
- PNPriya Nair
19 results
- Under $200
- Rated 4+
- Free cancellation
Guidelines
Short labels keep a row of chips scannable and fit on a phone.
They break the row into ragged lines and take longer to scan than one or two words.
Pressing a chip changes what you see; an action like "Export" stays a button.
A chip announces "pressed" or "not pressed", which makes no sense for "Delete".
Props
Avatar.defaultPressed.pressed.ReactElement or a function that returns the element to render.ChipGroup takes value, defaultValue and onValueChange (arrays of chip values), multiple (true by default), disabled and orientation. Give it a name with aria-label or aria-labelledby.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the chip itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
/* square chips, only in this toolbar */
.report-filters [data-slot="chip"] {
--cml-chip-radius: var(--cml-radius-control);
}Accessibility
- A filter chip is a button with aria-pressed, so screen readers say "Open, toggle button, pressed".
- ChipGroup has role="group" and needs a name, like "Status", so the chips are read as one set.
- The check mark shows the pressed state by shape, not only by color.
- When you remove a chip, move focus to a neighbour or to the input that adds chips, so keyboard users don't land on the page body.