Chip

v1.0

Chips represent discrete input values.

Skin
Marko
React

Stylized artwork of chips in a combobox.

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Keyboard navigation

The delete buttons for chips are in the page's natural tab order, reachable via TAB and SHIFT+TAB.

Pressing SPACEBAR or ENTER on a delete button removes the corresponding chip and moves keyboard focus to the nearest adjacent chip, or to the input field if no chips remain.

Tab Sequence

Delete button 1 (e.g. for Football)
Delete button 2 (e.g. for Soccer)
Delete button 3 (e.g. for Tennis)
Combobox (see Combobox component)