Chip

Chips are commonly used in filtering and as categorical identifiers. Chips can be contained within a Chip Group to provide keyboard functionality, consistent spacing, and facilitate selection workflows and filtering patterns.

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 can be themed to convey a variety of information, can contain Icons, Avatars, or images as visual cues. Additionally, Chips can be closed and visually hidden by a user.

Usage

  • Labeling
  • Status badges
  • Contextual counts or context for information.

Sample

Accessibility

Keyboard navigation

KeyFunction
TabWhen closable is true, moves focus in and out of the "Close" button.
Tab and ShiftWhen closable is true, moves focus in and out of the "Close" button.
EnterWhen closable is true and focus is on the "Close" button, hides the component.
SpaceWhen closable is true and focus is on the "Close" button, hides the component.

API reference

Properties

Slots

Styles

Events

Methods

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