Selectable item

Component checklist

Anatomy

The item is each one of the user's choices. All the items are shown all together in a list.

 

1. Checkbox is shown only in case of multi-select to indicate the possibility of selecting more than one item.
2. Leading icon represents what kind of content the item is. The icon can be changed to a visual element, e.g. a profile or user image.
3. Content area represents the space where the content of the item is shown. Despite the item type, there can be only the text or, for example, profile name with profile tag and URL.
4. Trailing icon is usually used to show the item's visibility, for example, if the content label is private or shared across the whole account. In the case of multilevel selects, there is an arrow icon or a button to open the next level.

 

---

 

Variations

We differentiate several types of items by their content or purpose. Each variant, except the headline and divider, can contain leading and trailing icons or a button in some specific cases.

 

1. Text is the core item variation. It usually represents folders, groups, labels, interests, or any data sources without special visual needs.
2. Text with Additional info item is based on the text item and enriched by an extra row of the text. This usually informs the user about the structure, role, creation date, team, or any additional information that helps users to recognize the main text.
3. Profile items are specially designed items used only to represent the social profile.
4. User items are specially designed items used only to represent the users of the Emplifi Platform. The additional info is optional.
5. User group/team items are specially designed items used only to represent the groups/teams of users.
6. Headline is a unique item used only on top of the group of items with the same kind of content or on top of the list. It is always used in case select all option exists.
7. Sometimes, the headline can be enriched with an option to create a new source. A simple link represents this option.
8. Divider is used to split the item list into logical groups.