Chip

A chip family — Chip (display), ChoiceChip (radio-style single-select), and FilterChip (toggle-style multi-select). Modeled on Flutter Material's Chip API.

Chip (display)

The base Chip renders a static label with optional avatar, leading icon, and delete button.

React

TypeScript

Deletable chip

React

TypeScript

Featured

ChoiceChip (single-select)

ChoiceChip renders a <button role="radio"> for radio-style selection. Use inside ChipGroup type="single" or manage selected / onPressed yourself.

FilterChip (multi-select)

FilterChip renders a <button role="checkbox"> for toggle-style multi-selection. Use inside ChipGroup type="multiple" or manage state directly.

Active: events

Sizes

All three chip types share sm, md (default), and lg sizes.

Small

Medium

Large

Variants

Default

Outlined

Installation

npx visor add chip

This copies two files into your project:

components/ui/chip/chip.tsx — Chip, ChoiceChip, and FilterChip components
components/ui/chip/chip.module.css — the styles

Usage

import { Chip, ChoiceChip, FilterChip } from '@/components/ui/chip/chip';

// Static display chip
<Chip label="React" />

// Deletable chip
<Chip label="Featured" onDeleted={() => removeTag('featured')} />

// Single-select (manage state yourself, or use ChipGroup)
<ChoiceChip
  label="Compact"
  selected={density === 'compact'}
  onPressed={() => setDensity('compact')}
/>

// Multi-select toggle (manage state yourself, or use ChipGroup)
<FilterChip
  label="Events"
  selected={filters.includes('events')}
  onPressed={() => toggleFilter('events')}
/>

For managed selection state across a group, use the chip-group block.

API Reference

ChipProps

No props data available for “chip”.

The component accepts all standard <div> HTML attributes.

ChoiceChipProps

Prop	Type	Default	Description
`selected`	`boolean`	`false`	Whether this chip is selected.
`onPressed`	`() => void`	—	Called when the chip is pressed.
`value`	`string`	—	Value identifier (used by ChipGroup).
`avatar`	`ReactNode`	—	Optional avatar before the label.
`leadingIcon`	`ReactNode`	—	Optional icon before the label.
`label`	`ReactNode`	—	Label content (or use `children`).
`variant`	`"default" \| "outlined"`	`"default"`	Visual variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.
`disabled`	`boolean`	`false`	Disables the chip.

FilterChipProps

Prop	Type	Default	Description
`selected`	`boolean`	`false`	Whether this chip is active.
`onPressed`	`() => void`	—	Called when the chip is toggled.
`value`	`string`	—	Value identifier (used by ChipGroup).
`leadingIcon`	`ReactNode`	—	Optional icon before the label.
`label`	`ReactNode`	—	Label content (or use `children`).
`variant`	`"default" \| "outlined"`	`"default"`	Visual variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.
`disabled`	`boolean`	`false`	Disables the chip.

Accessibility

Chip (display) renders as a <div>. The delete button is a <button> with aria-label (defaults to "Remove").
ChoiceChip renders as <button role="radio" aria-checked>. Wrap in a role="radiogroup" container (or use ChipGroup type="single") to provide group semantics.
FilterChip renders as <button role="checkbox" aria-checked>. ChipGroup type="multiple" wraps items in role="group".
Keyboard: Tab focuses each interactive chip; Space / Enter toggles or activates.
Disabled chips use disabled attribute and opacity — not hidden from screen readers.

On this page