Data and Identity

Stable - @kikita-labs/ui v1.6.1

Chip

Directive for compact selected values, filter tokens, tags, and entity references.

Import

Import the public directives from the published package entrypoint.

chip.ts
import { KuiChipDirective, KuiChipRemoveDirective } from '@kikita-labs/ui';

Usage

Open in Playground

kuiChip applies to a span for a static, non-interactive chip, or to a button/a for an interactive chip. Chip represents a chosen value or removable filter; Badge represents status. See the Badge docs when you need a status marker instead.

DesignEngineeringShipped
<div class="basic-chip-example">
  <span kuiChip>Design</span>
  <span kuiChip appearance="primary">Engineering</span>
  <span kuiChip appearance="success">Shipped</span>
</div>

Removable chip

Nest a button[kuiChipRemove] inside the chip and listen for (removed) to drop a value from a collection.

DesignEngineeringProduct
<div class="removable-chip-example">
  @for (tag of tags(); track tag) {
    <span kuiChip appearance="primary" (removed)="removeTag(tag)">
      <span class="kui-chip-label">{{ tag }}</span>
      <button kuiChipRemove type="button" [attr.aria-label]="'Remove ' + tag"></button>
    </span>
  }
</div>

Interactive filter chip

Use a native button host when the chip itself toggles a filter or selection instead of only removing a value.

<div class="interactive-chip-example">
  <button
    kuiChip
    type="button"
    [appearance]="selected() === 'all' ? 'primary' : 'neutral'"
    (click)="select('all')"
  >
    All
  </button>
  <button
    kuiChip
    type="button"
    [appearance]="selected() === 'open' ? 'primary' : 'neutral'"
    (click)="select('open')"
  >
    Open
  </button>
  <button
    kuiChip
    type="button"
    [appearance]="selected() === 'closed' ? 'primary' : 'neutral'"
    (click)="select('closed')"
  >
    Closed
  </button>
</div>

Disabled and invalid

disabled reduces opacity and makes the nested remove action inert. invalid shows the invalid border treatment.

DesignMissing owner
<div class="chip-states-example">
  <span kuiChip disabled>
    <span class="kui-chip-label">Design</span>
    <button kuiChipRemove type="button" aria-label="Remove Design"></button>
  </span>
  <span kuiChip invalid appearance="danger">Missing owner</span>
</div>

API

Inputs and outputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
appearance'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info''neutral'Semantic visual treatment mapped to Kikita UI status tokens.
size'xs' | 'sm' | 'md' | 'lg''md'Chip size. sm is the size used inside Select and Combobox controls.
disabledbooleanfalseReduces opacity and makes the nested remove action inert.
invalidbooleanfalseShows the invalid border treatment.
removedoutput: void-Emitted when a nested button[kuiChipRemove] is clicked.
kuiChipRemovedirective on button-Marks a native button as the chip remove action. Needs its own aria-label, for example "Remove Design".
--kui-chip-bgCSS color-Chip background color.
--kui-chip-bg-hoverCSS color-Chip background color on hover for interactive chips.
--kui-chip-borderCSS color-Chip border color.
--kui-chip-textCSS color-Chip label text color.
--kui-chip-radiusCSS length-Chip corner radius.
--kui-chip-height-xsCSS length-Chip block size for size="xs".
--kui-chip-height-smCSS length-Chip block size for size="sm".
--kui-chip-height-mdCSS length-Chip block size for size="md" (default).
--kui-chip-height-lgCSS length-Chip block size for size="lg".
--kui-chip-remove-colorCSS color-Remove icon color.
--kui-chip-remove-color-hoverCSS color-Remove icon color on hover.
--kui-chip-disabled-opacityCSS number-Opacity applied to the whole chip when disabled.

Accessibility

Chip keeps native element semantics instead of adding ARIA roles.

  • Use a non-interactive host such as span for a static chip.
  • Use a native button or a for an interactive chip.
  • The remove action must be a native button[kuiChipRemove] with its own accessible name, for example aria-label="Remove Design".
  • Disabled chips mark the remove button aria-disabled="true" and tabindex="-1".
  • Select and Combobox own keyboard behavior for Delete/Backspace selected-value removal; do not duplicate that handling when Chip is used inside those controls.