Chips

Usage

Chips are compact elements that represent an input, attribute or action depending on the type of Chips used. They display information in a pill-shaped container.

They allow users to present entered information, make selections, filter or perform actions. They are dynamic elements that can change size, content and state depending on other events and can appear in groups. A Chip can consist of a text element, an icon and a text, only icon, and some chips can also contain a close button which is a nested Icon Button Compact component that allows users to remove the chip from a selection. It is important to keep Chips compact and represent a discrete information. They should have a clear and helpful relationship with the content or task they represent.

Types

There are 3 variants of Chips: Choice Chip, Filter Chip and Input Chip.

Choice Chips - In sets that contain at least two options, Choice Chips enable user to make a selection and then represent that choice. Choice Chips are a form of input method for users that clearly delineate and display options that are compact and short. They are a good alternative to toggle buttons, radio buttons, and single-select menus. Example of Choice Chips are Female or Male chips in forms where user clicks on one to make a choice. Choice Chips can have an optional, informative leading icon but no close button. Text is also an optional property, thus in some cases only an icon can represent the Choice Chip if it is explicit enough and there is a limitation of space in the interface. Choice Chips can be: Chosen or Not Chosen.

Filter Chips - Filter Chips represent filters set for a collection of items. Filter Chips are tags or descriptive words to filter content. It is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects. In most cases Filter Chips appear dynamically as user selects attribute-value pairs for example from a dropdown menu that filters the set of data. They have optional leading icon. They have a close button which is the Icon Button Compact (close button variant) component nested that user can click to close/remove the corresponding filtering.

Input Chips - take user input and verify that input by converting it into chips. Input Chips represent information used in fields, such as an entity or different attributes. They have a close button to delete this specific user input. One example of Input Chips’ usage is when user inputs an email address and that address is converted into a chip. Input Chips do not have a leading icon. They must have a close button which is a Icon Button Compact component nested inside. Input Chips can optionally validate the user input and therefore have two modes: Default (no validation) and Error.

Anatomy and Behavior

1. Container - holds all chip elements, and its width is determined by those elements. In case of Input Chips and Choice Chips it is a clickable area.
2. Leading Icon - - is an optional element. It can be an icon, logo, etc. It helps users identify an entity or supplement the information on the text and decrease cognitive load for the user. Leading icon can either represent the filtering action (with a filtering icon) or the attribute-value they are filtering (e.g. palette icon to represent color filtering).
3. Text - can be an entity name, description, tag, action or any other information provider for the user.
4. Remove Icon - Input Chips and Filter Chips have a close button which is a nested Icon Button Compact to delete/reset this user input or filtering.

Behavior

Choice Chips: By clicking on the Choice Chip user selects it (converts to Chosen) or activates the corresponding function. Clicking on the other Chip unselects the previously selected one. Choice Chips appear as part of a series of other Choice Chips. They are typically displayed horizontally and sequentially. In case of having Choice Chips that can not be wrapped in one row, we should be cautious because having more than one row might be harder to scan.

Filter Chips: Filter chips represent filters for a collection. They do the filtering of dataset by one click (or tap). Multiple chips can be selected or deselected. They have a close button that also dismisses the previously made filtering based on the value they hold. For example, user clicks on a ‘Filter by Material’ Select component that opens up a dropdown menu with all the material options. User selects the desired material e.g. steel, and the Filter Chip with the text Steel appears near a dataset, and dataset is filtered to show only the products made of steel. When a user closes this chip the filtered dataset is reset to its default state.

Note: Despite the name Filter Chips, they are not the only type of chips that can filter data. Sometimes Choice Chips can represent a set of choices, that as a result may filter the data fetched from the backend. The backend related functionalities and data manipulations are not strict rules embedded to the components but rather guidelines for designers and developers to help users develop sense of expectation about what will happen if they click the specific component.

Input Chips: A single field can contain multiple Input Chips. For example: different names in the address field of an email. Input Chips can be integrated with other components. They can appear inline or in a stacked list. Input Chips get the input from user (for example text or image) and transform it to the Chip with text or image name in it. Optionally Input Chips can have input validation. If the text input is not recognized by the system, Input Chips can display an error. For example: writing “lida@pohlcon.comm” instead of “lida@pohlcon.com”

lida@pohlcon.comm

lida@pohlcon.com

Gaps and Sizes

Filter Chips, Choice Chips

• Padding horizontal: M
• Padding vertical: 2XS
• Radius: L
• Gaps between Leading icon, Text and Close button: S
• Container width: Adapts to the text width, but with min. width of: 4XL. But it the overall width can be overridden in the project in cases where we need equal width for different Chips.
• Alignment: center

Input Chips

• Padding horizontal: S
• Padding vertical: 2XS
• Radius: S
• Gap between Text and Close button: XS
• Container width: adapts to the text width
• Alignment: Left aligned

Filter Chips

This is chip

This is chip

This is chip

Choice Chips

This is chip

This is chip

This is chip

Input Chips

This is chip

This is chip

This is chip

States

Choice Chips can be Chosen or Not-chosen. Not-chosen state has hover, active, focus, and Disabled. When Choice Chip is Chosen it is not clickable.

Filter Chips can only be default(_) and Disabled.

Input Chips can be Error type or No-error type. No-error type can have the states of hover, active-dragged, focus and Disabled. Error type can have the states of hover, active-dragged, focus.

• This kind of filter (or choice) chip suggestions can dynamically change as users start to select filters.

Tokens

SCSS Variable

Value

$chips-bgColor

--color-grey-93

$chips-color

--color-grey-40

$chips-outline-color--focus

--color-azure-45

$chips-outline-color--locked

--color-grey-86

$chips-color--locked

--color-grey-70

$chips-choice-boxShadow--chosen

--elevation-2

$chips-input-bgColor

--color-grey-98

$chips-input-error-color

--color-red-50

$chips-input-error-bgColor

--color-red-95

$chips-gap

--gutter-m

$chips-border-width

1px

$chips-border-radius

--gutter-l

$chips-padding-vertical

--gutter-xs

$chips-padding-horizontal

--gutter-m

$chips-padding-input

--gutter-2xs) var(--gutter-xs

$chips-boxShadow

--embossed-1--grey-95

$chips-boxShadow--hover

--embossed-2--grey-95

$chips-boxShadow--active

--debossed-1--grey-95

$chips-boxShadow--locked

none

$chips-input-boxShadow

--elevation-05

$chips-input-boxShadow--active

--elevation-2

$chips-input-boxShadow--hover

--elevation-1

$chips-input-boxShadow--locked

none

Properties

export type ChipsCategory = 'choice' | 'filter' | 'input';

export type ChipsProps<C extends ChipsCategory> =
& ElementProps
  & {
    chosen?: C extends 'choice'
      ? boolean | string
      : never;
    text?: string | number;
    category?: ChipsCategory;
    icon?: IconName;
    disabled?: boolean;
    error?: boolean;
    width?: string;
};

Configurations

Chips
Categories	Action	Default	Icon	Close Button	Disabled
		Input	none	This is Chips	This is Chips -	This is Chips	This is Chips
error	This is Chips		This is Chips -	This is Chips	This is Chips
Choice	none	This is Chips	This is Chips	This is Chips -	This is Chips
	chosen	This is chosen state
Filter	none	This is a Chip	This is a Chip	This is a Chip	This is a Chip

Chip Sizes
Category	Sizes	Default Chip
input
	small	This is a Chip
	medium	This is a Chip
	big	This is a Chip
choice
	small	This is a Chip
	medium	This is a Chip
	big	This is a Chip
filter
	small	This is a Chip
	medium	This is a Chip
	big	This is a Chip

Developer notes

NOTE

Select Event (@select): Triggered when the user clicks on the chip text. The event sends the id of the selected chip to the parent component.

Delete Event (@delete): Triggered when the user clicks on the delete button (IconButtonCompact). The event sends the id of the chip to be deleted to the parent component.

The component property chosen can either be of type boolean or string. This is for compatibility reasons combined with the way of working of the choice component type. As of today you should be passing the id of the selected chip dynamically and the component will derive whether or not it is the currently chosen one. In a later version this will be eased and changed to a two-way binding (v-model).

Select action

When the user clicks on the text, the select event is emitted. Same thing happens when clicks on the X button.

<script>
  import { Chips } from '@pohlcon/design-system';

  function handleSelect(){
    //Handle SELECT of the element
  }

  function handleDelete(){
    //Handle DELETE of the element
  }

</script>

<template>
  <Chips text="This is chip" category="input" iconCancel="true"  @select="handleSelect" @delete="handleDelete"/>
</template>

<style lang="scss">
</style>