Chip

The Chip component displays compact tags, links, actions, filters, and removable selections.

Installation

npm install @duskmoon-dev/el-chip

Usage

import '@duskmoon-dev/el-chip/register';

<el-dm-chip>Tag</el-dm-chip>

Live Demo

Properties and Attributes

Semantic Modes

<!-- Display: a non-focusable span -->
<el-dm-chip>Release 1.8</el-dm-chip>

<!-- Link: a native anchor -->
<el-dm-chip href="/releases" target="_blank" rel="noopener">Releases</el-dm-chip>

<!-- Clickable: a native action button -->
<el-dm-chip clickable>Refresh</el-dm-chip>

<!-- Selectable: a native toggle button -->
<el-dm-chip selectable selected>TypeScript</el-dm-chip>

<!-- Deletable: a label with a native delete button -->
<el-dm-chip deletable delete-label="Remove TypeScript filter">TypeScript</el-dm-chip>

When multiple mode attributes are present, the mode precedence is deletable → href → selectable → clickable → display. This prevents nested interactive controls. Prefer one mode attribute per chip unless you intentionally rely on this precedence. The target and rel properties apply only when href wins.

Colors

<el-dm-chip color="primary">Primary</el-dm-chip>
<el-dm-chip color="secondary">Secondary</el-dm-chip>
<el-dm-chip color="success">Success</el-dm-chip>

Variants

<el-dm-chip variant="filled">Filled</el-dm-chip>
<el-dm-chip variant="outlined">Outlined</el-dm-chip>
<el-dm-chip variant="soft">Soft</el-dm-chip>

Sizes

<el-dm-chip size="sm">Small</el-dm-chip>
<el-dm-chip size="md">Medium</el-dm-chip>
<el-dm-chip size="lg">Large</el-dm-chip>

Deletable

<el-dm-chip deletable delete-label="Remove Web Components tag">Web Components</el-dm-chip>

Selectable State

<el-dm-chip selectable>Unselected</el-dm-chip> <el-dm-chip selectable selected>Selected</el-dm-chip>

Selectable chips toggle selected themselves and reflect the new state through aria-pressed and the dm-change event.

Disabled

<el-dm-chip href="/releases" disabled>Disabled link</el-dm-chip>
<el-dm-chip clickable disabled>Disabled action</el-dm-chip>
<el-dm-chip selectable disabled>Disabled choice</el-dm-chip>
<el-dm-chip deletable disabled>Protected tag</el-dm-chip>

Events

These custom events bubble, cross the shadow boundary, and are cancelable. Canceling dm-click prevents link navigation. Native click events from the rendered anchor or button are also available. Disabled chips do not emit action events.

Event Handling

const chip = document.querySelector('el-dm-chip');
const filterInput = document.querySelector('#filter-input');
chip.addEventListener('dm-delete', () => {
  chip.remove();
  filterInput?.focus();
});

The component emits the removal request but never removes itself. If the application removes the focused chip, it must move focus to the next logical chip, the previous chip, or the owning input.

Use dm-delete for new integrations. The unprefixed delete event is retained only as a deprecated compatibility alias.

Slots

CSS Parts

Accessibility

• Display chips render as plain, non-focusable spans.
• Link, clickable, and selectable modes use native anchors or buttons for built-in keyboard and focus behavior.
• Selectable chips expose aria-pressed and retain focus after their selected state changes.
• Deletable chips use a focusable native button. Customize its accessible name with delete-label; the visual delete icon is hidden from assistive technology.
• Disabled buttons use the native disabled state. Disabled links render as noninteractive spans with aria-disabled="true", and disabled deletable chips disable their delete button.