Forms

Chip

Server Component

Interactive filter/selection chip — toggleable, dismissible, with icon and avatar slots.

Import

tsx

import { Chip } from "@cronus-ui/ui";

bash

npx cronus-ui add chip

Examples

Filter chips

Give a chip `selected` + `onClick` and it renders as a toggle button with `aria-pressed` and a leading check mark while on. Enter/Space toggle from the keyboard.

tsx

const TOPICS = ["Design", "React", "TypeScript", "Motion", "A11y"];

function ChipFilterDemo() {
  const [selected, setSelected] = useState<string[]>(["Design"]);

  const toggle = (topic: string) =>
    setSelected((current) =>
      current.includes(topic) ? current.filter((item) => item !== topic) : [...current, topic],
    );

  return (
    <ChipGroup aria-label="Filter articles by topic">
      {TOPICS.map((topic) => (
        <Chip key={topic} selected={selected.includes(topic)} onClick={() => toggle(topic)}>
          {topic}
        </Chip>
      ))}
    </ChipGroup>
  );
}

Variants, colors & sizes

Three treatments across the semantic palette — `solid` fills, `soft` 15% tints with AA-tuned `*-strong` text, and `outline`. Chips without `onClick`/`selected` render as static, server-safe `<span>`s.

SolidErrorSoftWarningOutlineSmallLarge

tsx

<ChipGroup aria-label="Chip variants">
  <Chip variant="solid" color="primary">Solid</Chip>
  <Chip variant="solid" color="error">Error</Chip>
  <Chip variant="soft" color="success">Soft</Chip>
  <Chip variant="soft" color="warning">Warning</Chip>
  <Chip variant="outline" color="info">Outline</Chip>
  <Chip variant="soft" size="sm">Small</Chip>
  <Chip variant="outline" size="lg">Large</Chip>
</ChipGroup>

Dismissible

`onRemove` adds a remove affordance — pointer users hit the ×, keyboard users press Delete or Backspace on the focused chip. Removal never triggers the chip's own `onClick`.

AuroraNebulaPulsarQuasar

tsx

const INITIAL_TAGS = ["Aurora", "Nebula", "Pulsar", "Quasar"];

function ChipDismissibleDemo() {
  const [tags, setTags] = useState<string[]>(INITIAL_TAGS);

  if (tags.length === 0) {
    return (
      <Button variant="outline" size="sm" onClick={() => setTags(INITIAL_TAGS)}>
        Reset tags
      </Button>
    );
  }

  return (
    <ChipGroup aria-label="Selected tags">
      {tags.map((tag) => (
        <Chip
          key={tag}
          variant="soft"
          color="primary"
          onRemove={() => setTags((current) => current.filter((item) => item !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </ChipGroup>
  );
}

API Reference

Generated from the component's exported types.

ChipProps

Extends Omit<HTMLAttributes<HTMLElement>, "color">, Omit<VariantProps<typeof chipVariants>, "interactive" | "selected">

Prop	Type	Default	Description
`variant`	`"solid" \| "soft" \| "outline"`	`"soft"`	Visual treatment: `solid` fill, `soft` 15% tint, or `outline`.
`color`	`"neutral" \| "primary" \| "success" \| "warning" \| "error" \| "info"`	`"neutral"`	Semantic hue applied by the variant recipe.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Pill height / typography preset.
`selected`	`boolean`	`undefined`	Toggle state for filter-style chips. Any non-`undefined` value renders the chip as a `<button>` with `aria-pressed`; while `true` it also gains a leading check mark and emphasized styling.
`icon`	`ReactNode`	—	Leading icon slot rendered before the label (e.g. a lucide icon).
`avatar`	`ReactNode`	—	Leading avatar slot (an `img`, `Avatar`, …) clipped to a circle and sized by `size`.
`onRemove`	`() => void`	—	Makes the chip dismissible. On a static chip this renders a real, focusable remove button (Enter/Space activate it); on an interactive chip the affordance is decorative and Delete or Backspace on the focused chip removes it instead. Removal never triggers `onClick`, and removal clicks never propagate to ancestor click handlers.
`disabled`	`boolean`	`false`	Disables the chip and its remove affordance.
`labels`	`Partial<ChipLabels>`	—	Override any subset of the built-in screen-reader strings. See .

ChipGroupProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessible name announcing what the chip collection represents.