Docs / Components
SenseChipComponent
Compact pill from @artificialsenselabs/ui for tags, 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';
<sense-chip label="Angular" color="primary" [removable]="true" />Inputs
| Input | Type | Default | Description |
|---|---|---|---|
label | string | null | null | Visible chip text. |
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 | Shows dismiss sense-icon-button; host role="group". |
selectable | boolean | false | Toggle selection on click or Space/Enter. |
selected | boolean | false | Selected state when selectable is true. |
size | 'sm' | 'md' | 'lg' | 'md' | Chip scale token. |
color | 'primary' | … | 'neutral' | 'primary' | Semantic colour treatment. |
styleClass | string | null | null | Additional host classes. |
Outputs
| Output | Type | Description |
|---|---|---|
removed | MouseEvent | Emitted when the remove button is activated. |
selectedChange | boolean | Emitted when selection toggles in selectable mode. |
Accessibility
- Selectable chips expose
role="button",aria-pressed, andtabindex="0". - Removable chips use
role="group"; dismiss is a labelledsense-icon-button. - Keyboard: Space and Enter toggle selection when
selectableis true. - Provide
imageAltwhen using avatar images.
APG reference: WAI-ARIA button pattern (toggle chips).