HyChip

A compact, interactive element for displaying tags, filters, selections, or actions.

Chips are versatile UI elements that can represent inputs, attributes, or actions. Unlike badges (which are non-interactive status indicators), chips support user interaction including clicking, selecting, and removing.

Key Features

• Multiple semantic variants (neutral, brand, success, warning, danger)
• Optional remove button for dismissible chips
• Selectable state for filter/toggle scenarios
• Link mode when href is provided
• Icon and avatar support via prefix/suffix slots
• Full keyboard navigation (Enter, Space, Backspace, Delete)
• SSR compatible

Accessibility Features

• Proper ARIA roles and states
• Keyboard navigation with focus indicators
• Screen reader announcements
• High contrast mode support
• Reduced motion support

Examples

Basic Chip

<hy-chip>Label</hy-chip>

With Icon

<hy-chip icon="favorite-border">Favorites</hy-chip>

Removable Chip

<hy-chip removable>Removable</hy-chip>

Selectable Chip

<hy-chip selected>Selected</hy-chip>

Link Chip

<hy-chip href="/category/design">Design</hy-chip>

Variants

<hy-chip variant="neutral">Neutral</hy-chip>
<hy-chip variant="brand">Brand</hy-chip>
<hy-chip variant="success">Success</hy-chip>
<hy-chip variant="warning">Warning</hy-chip>
<hy-chip variant="danger">Danger</hy-chip>

Categorical / Identity tag

<!-- Hash an identity string to a stable slot in a named group. -->
<hy-chip category-group="team" identity="user-alice">Alice</hy-chip>
<!-- Explicit slot beats identity. -->
<hy-chip category-group="team" slot-index="3">Frontend</hy-chip>
<!-- A non-neutral variant wins — categorical is ignored. -->
<hy-chip variant="brand" category-group="team" slot-index="3">Brand (categorical skipped)</hy-chip>

Event Handling

const chip = document.querySelector('hy-chip[removable]');

chip.addEventListener('remove', (event) => {
console.log('Chip removed:', event.detail.chip);
event.detail.chip.remove(); // Remove from DOM
});

chip.addEventListener('select', (event) => {
console.log('Selection changed:', event.detail.selected);
});

Events

• activate - Fired when chip is clicked. Detail: { originalEvent: MouseEvent | KeyboardEvent }
• remove - Fired when remove button is clicked or Backspace/Delete pressed. Detail: { chip: HyChip, originalEvent: MouseEvent | KeyboardEvent }
• select - Fired when chip selection state changes. Detail: { selected: boolean, originalEvent: MouseEvent | KeyboardEvent }

Slots

• default - The chip's label text
• prefix - Content before the label (icon, avatar)
• suffix - Content after the label, before remove button (icon, count)

Methods

focus()

Sets focus on the chip.

blur()

Removes focus from the chip.