Docs / Components
SenseChipComponent
Compact pill from @artificialsenselabs/ui for filters and multi-select choices with optional remove and toggle modes.
Live demo: run nx serve showcase and open /components/chip (port 4202).
Overview
Category: Display / input. Selector: sense-chip. Import: import { SenseChipComponent } from '@artificialsenselabs/ui';
Choose chip for filter / multi-select (optional remove). Prefer badge for status / counts / metadata (never interactive) and tag for static category labels (optional dismiss).
<sense-chip label="Angular" severity="primary" [removable]="true" />Inputs
| Input | Type | Default | Description |
|---|---|---|---|
label | string | null | null | Visible chip text. |
variant | filled | outlined | ghost | filled | Surface treatment (ADR-0030). |
severity | primary | … | neutral | primary | Semantic colour role. |
image | string | null | null | Optional circular avatar URL. |
imageAlt | string | null | null | Avatar alt text; falls back to chip.image-alt i18n. |
removable | boolean | false | Dismiss control + Delete/Backspace; host role="group". Wins over selectable. |
selectable | boolean | false | Toggle selection on click or Space/Enter (ignored when removable). |
selected | boolean | false | Selected state when selectable. |
size | 'sm' | 'md' | 'lg' | 'md' | Chip scale token. |
Outputs
| Output | Type | Description |
|---|---|---|
removed | MouseEvent | Emitted when dismiss is activated (button or Delete/Backspace). |
selectedChange | boolean | Emitted when selection toggles in selectable mode. |
Accessibility
- Selectable chips expose
role="button",aria-pressed, andtabindex="0". Keyboard: Space / Enter. - Removable chips expose
role="group"andtabindex="0". Remove via the labelled dismiss button or Delete / Backspace on the focused chip. - Do not combine removable + selectable — removable wins and disables selection.
- Provide
imageAltwhen using avatar images.
APG reference: WAI-ARIA button pattern (toggle chips).