Chip group

When to use #

Use it for

A handful of filters or channels that are always visible.
Choices that read as short labels.

Skip it when

More than eight options; use a multi-select.
Options need explanation; use radio cards.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/chip-group.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { ChipGroup } from "@/components/ui/chip-group"

export function ChannelChips() {
  const [selected, setSelected] = useState<string | string[]>(["email"]);
  return (
    <ChipGroup
      label="Channels"
      options={[
        { value: "email", label: "Email" },
        { value: "push", label: "Push" },
        { value: "sms", label: "SMS" },
        { value: "slack", label: "Slack" },
      ]}
      value={selected}
      onValueChange={setSelected}
    />
  );
}

API reference #

ChipGroup

component

PropTypeDefault

label *string—

options *readonly ChipOption[]—

valuestring | readonly string[]—

defaultValuestring | readonly string[]—

onValueChange((value: string | string[]) => void)—

selection"multiple" | "single""multiple"

namestring—

classNamestring—

It is built on native elements and keeps aria-disabled, aria-label, aria-checked and aria-pressed in step with state.

KeyBehaviour

→Moves to the next item or value.

↓Moves to the next item or value.

←Moves to the previous item or value.

↑Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.