Components

Chip

Overview

Overview

When to use

Chips are used to show added items within a form, make selections, or filter content.

When not to use

Don't use chips to display static information, use badges instead.

Variants

Selection chips

Selection chips can be used to make selections or create filters. Chip can be selected or unselected by clicking on it. The use of an icon is optional.

Usage example:

Input chips

Input chips display the user's choice in a filter, an input field or a select box. An input chip can be removed from a group of chips by clicking on the X icon.

Usage examples:

Size

Chips come in three different sizes: large, medium and small. Do not use different sizes in a group.

Icons

Icons can be used in large and medium chips.

Labels

Chip titles should describe the chip in a few words and be under 20 characters when possible.

When the chip's title is too long to fit within the available space of the tag container, the title can be truncated with an ellipsis. The full title is disclosed in a tooltip on hover when using a mouse and on focus when using a keyboard.

Grouping

A group of chips should flow like words in a paragraph, not a vertical list. This keeps the group compact to improve scannability.

Within a select box or input field

There are two ways to display chips within a form field. If there are less than 10 options and the text labels are short, the height of the for field can be expanded to fit all the selected options.

If there are more than 10 options and the text labels are longer, it is recommended to show only first few selections and a text label (e.g. +4) to indicate the amount of hidden chips.

Usage

Usage guidelines

Labels

Truncate labels that are longer than 20 characters and do not wrap text on multiple lines.

Do

Don't

Size

Do not use different sizes in a group.

Do

Don't

The chip will automatically size itself to fit the content. Do not change the width of the chip.

Do

Don't

Icons

Do not use icons without a label.

Do

Don't

Accessibility

Keyboard

• Selection chip: a button. Tab focuses it, and Enter or Space toggle it.
• Input chip: the chip itself is not focusable. Its remove button is: Tab to it, and Enter or Space to remove.

When a chip's text is truncated, its tooltip with the full text appears when the chip, or the remove button inside it, gets focus. Escape hides it.

Screen readers

A selection chip is a toggle button: aria-pressed="true" or "false" is announced as "pressed" or "not pressed". Its name is the visible text. An icon-only selection chip uses ariaLabel.

The remove button of an input chip is named "Eemalda" plus the chip text (removeLabel), so a list of chips reads "Eemalda Tallinn", "Eemalda Tartu" rather than a row of identical "X" buttons. Its icon is aria-hidden="true".

For text longer than 20 characters, the shortened visible text is aria-hidden="true" and the full text is in a visually hidden span, so screen readers always read the complete label. The tooltip is linked through aria-describedby.

Using the example

• The example has no toggle script. When a selection chip is toggled, update aria-pressed and the tds-chip--selected class together.
• After removing an input chip, move focus to the next chip's remove button, or to the input the chips belong to, so focus is not lost.
• Group related selection chips in a fieldset with a legend, or in a role="group" with an aria-label.
• Tooltip ids (<id>-tooltip) must be unique; they are derived from the chip id.
• Pass removeLabel in the page language on non-Estonian pages.