Chip Component

Chip Specification

Objectives

Provide compact elements that represent an input, attribute, or action.

2. User Stories

Elaborate more on the multi-facetted use cases

As a developer, I want to:

implement a chip (1)
Implement a chip group, so that I can implement chips in it.
to be able to change background of the chip, so that it would be consistent with the rest of the application.
have a (3)label in the chip, so that the chip can exit as a separate entity.
To be able to add (2) avatar, logo or an icon, so that I can give further visual clues about the chip.
To able to add a “Remove” icon, so that the user will be able to remove the chip.
set min and max size of the chip W/H?

As an end user, I want to:

Story 1: As an end user, I want…, so that I can…

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

...

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End User Experience A chip can be:

selected and deselected by the user.
moved within it’s group, using just hold and drag.
removed from the group using a remove icon.

3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. User Interface

3.5. Keyboard Navigation

Users can move through the chips using the arrow keys and select/deselect them with the space. Chips also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.

3.6. API

Options

Name	Description	Type	Default value	Valid values

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

4. ARIA Support

A chip-list behaves as a role="listbox", with each chip being a role="option". The chip input should have a placeholder or be given a meaningful label via aria-label or aria-labelledby.