Chip
Compact interactive labels for filters, tags, and selections — supports dismissible and selectable modes.
Frontend
API
All inputs and configuration options for zyra-chip.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'purple' | 'default' | Color and semantic meaning |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the chip |
dismissible | boolean | false | Shows a × button to remove the chip |
selectable | boolean | false | Enables toggle-selection state |
selected | boolean | false | Current selected state (two-way bindable) |
disabled | boolean | false | Prevents interaction |
dismissed (output) | void | - | Emits when the × button is clicked |
selectedChange (output) | boolean | - | Emits the new selected state when toggled |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Dismissible chips include a visually-hidden "Remove" label on the × button
- Selectable chips use aria-pressed to communicate toggle state
- Use a group element with role="group" and an aria-label when listing multiple chips