Chip

Chips are compact elements representing an input, attribute, or filterable option. [rhombusChip] and [rhombusChipGroup] are decoration directives applied to Material's <mat-chip-option> and <mat-chip-listbox>, adding variant colours through the token contract — toggle the theme above and the chips re-skin without touching markup.

Example

When to use

  • Use chips for a set of selectable options or filters — tags, statuses, categories rendered as a compact, wrapping row.
  • When you want a radio- or checkbox-style choice that reads as tags rather than a form control — status pickers, category toggles, faceted filters.

When not to use

  • For a single on/off setting, use a Switch or Checkbox.
  • For a mutually-exclusive choice in a form, use a Radio group or a Select.
  • For a static, non-interactive status label, use a Badge.

Related components

  • Badge — static status labels.
  • Checkbox — multi-select form control.
  • Radio — single-select form control.
  • Select — single choice from a long list.

Was this page helpful?