Chip

Chips are display contextual helpers that are commonly used in filtering and as categorical identifiers.

Overview

Chips are small, feature-rich components that can be used independently or in groups. Chips are used in Combobox and other scenarios that have a filtering interaction.

Chips have a range of colors, can contain Icons, Avatars, or images as visual cues. Additionally, Chips can be dismissible or static elements.

Usage

  • Filtering cues
  • Qualifying badges
  • Contextual support of content

Sample

Accessibility

Keyboard navigation

KeyFunction
TabWhen dismissible is true, moves focus in and out of the "Dismiss" button.
Tab and ShiftWhen dismissible is true, moves focus in and out of the "Dismiss" button.
EnterWhen dismissible is true and focus is on the "Dismiss" button, dismisses the component.
SpaceWhen dismissible is true and focus is on the "Dismiss" button, dismisses the component.

API reference

Properties

Slots

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.