Github

Chip

Chips are compact interactive elements used for filtering, selection, or tagging content.

Component variations

Default

Unselected chip with icon, label, and close button

Label

Selected

Chip in selected state with primary color styling

Label

Without close button

Chip with closable set to false — no remove action

Label
Label

Without icon

Chip without a leading icon

Label
Label

Disabled

Disabled chips cannot be interacted with

Label
Label
Label
Label

Usage Guidelines

Import

Import the chip component in your module or component:

import-chip.ts

Copy code

Basic Implementation

Minimal chip with just a label:

chip-example.html

Copy code

Implementation with all available APIs

Full example using all available inputs and outputs:

chip-example.html

Copy code

Two-way binding

Use [(selected)] for two-way binding on the selected state:

chip-two-way.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
Yes
Text displayed inside the chip
selected
boolean
false
No
Whether the chip is in the selected state
closable
boolean
true
No
Whether the chip displays a close/remove button
icon
string
''
No
Icon name to display before the label (e.g. "vd-icon-tag"). Empty string hides the icon
disabled
boolean
false
No
Disables interaction and applies disabled visual styling

Outputs

Event
Type
Description
selectedChange
EventEmitter<boolean>
Emits the new selected value when the chip is clicked. Supports two-way binding with [(selected)]
closed
EventEmitter<void>
Emits when the close button is clicked

Best Practices

When to Use

  • Use chips to represent filters, tags, or multi-select options in a compact form.
  • Use the closable chip to allow users to remove selected items from a set.
  • Use the selected state to visually confirm an active filter or selection.

When Not to Use

  • Avoid chips for primary call-to-action buttons — use vd-button instead.
  • Avoid chips as navigation elements — use tabs or breadcrumbs.
  • Do not use chips when the list of options is too long to display inline.

Design Guidelines

  • Keep chip labels short and descriptive — one to three words is ideal.
  • Use the icon to add semantic context, not purely for decoration.
  • Ensure keyboard navigation works: chips are focusable and respond to Enter/Space.
  • Use consistent chip sizes within the same group or row.
  • Use [(selected)] two-way binding when managing selection state in a parent component.

Component playground

Label

example.html

Copy code