Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Version: Canary 🚧

Change log

Components

Chip

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.