Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Multiselect

Multiselect allows marketers to search and select multiple items from a list of options.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options">
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
    <e-select-option>
      Option 13
    </e-select-option>
    <e-select-option>
      Option 14
    </e-select-option>
    <e-select-option>
      Option 15
    </e-select-option>
    <e-select-option>
      Option 16
    </e-select-option>
    <e-select-option>
      Option 17
    </e-select-option>
    <e-select-option>
      Option 18
    </e-select-option>
    <e-select-option>
      Option 19
    </e-select-option>
    <e-select-option>
      Option 20
    </e-select-option>
    <e-select-option>
      Option 21
    </e-select-option>
    <e-select-option>
      Option 22
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options">
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
    <e-select-option>
      Option 13
    </e-select-option>
    <e-select-option>
      Option 14
    </e-select-option>
    <e-select-option>
      Option 15
    </e-select-option>
    <e-select-option>
      Option 16
    </e-select-option>
    <e-select-option>
      Option 17
    </e-select-option>
    <e-select-option>
      Option 18
    </e-select-option>
    <e-select-option>
      Option 19
    </e-select-option>
    <e-select-option>
      Option 20
    </e-select-option>
    <e-select-option>
      Option 21
    </e-select-option>
    <e-select-option>
      Option 22
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9Option 10Option 11Option 12Option 13Option 14Option 15Option 16Option 17Option 18Option 19Option 20Option 21Option 22

Variations

With default selected option
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Default selected
  </label>
  <e-multiselect>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option disabled>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Default selected
  </label>
  <e-multiselect>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option disabled>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

With search
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options">
    <e-select-option value="this is option" disabled>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
    <e-select-option>
      Option 13
    </e-select-option>
    <e-select-option disabled>
      Option 14
    </e-select-option>
    <e-select-option>
      Option 15
    </e-select-option>
    <e-select-option>
      Option 16
    </e-select-option>
    <e-select-option disabled>
      Option 17
    </e-select-option>
    <e-select-option disabled>
      Option 18
    </e-select-option>
    <e-select-option>
      Option 19
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options">
    <e-select-option value="this is option" disabled>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
    <e-select-option>
      Option 13
    </e-select-option>
    <e-select-option disabled>
      Option 14
    </e-select-option>
    <e-select-option>
      Option 15
    </e-select-option>
    <e-select-option>
      Option 16
    </e-select-option>
    <e-select-option disabled>
      Option 17
    </e-select-option>
    <e-select-option disabled>
      Option 18
    </e-select-option>
    <e-select-option>
      Option 19
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 12Option 13Option 14Option 15Option 16Option 17Option 18Option 19Option 10

Disabled
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Disabled multiselect label
  </label>
  <e-multiselect disabled>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option selected>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option selected>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Disabled multiselect label
  </label>
  <e-multiselect disabled>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option selected>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option selected>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

Invalid
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Invalid multiselect label
  </label>
  <e-multiselect invalid>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>
<div class="e-field">
  <label class="e-field__label">
    Invalid multiselect label
  </label>
  <e-multiselect invalid>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8An error occured

Limited size
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-multiselect-large

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect class="e-multiselect-large" placeholder="Please select one or more options">
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect class="e-multiselect-large" placeholder="Please select one or more options">
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9Option 10Option 11Option 12

Inline
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-multiselect-inline

<div class="e-field">
  <label class="e-field__label e-field__label-inline">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options" inline>
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
  </e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-inline">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select one or more options" inline>
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
    <e-select-option>
      Option 9
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
    <e-select-option>
      Option 11
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
  </e-multiselect>
</div>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9Option 10Option 11Option 12

Items setter
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[items]

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect id="itemsExample"></e-multiselect>
</div>
<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect id="itemsExample"></e-multiselect>
</div>
JavaScript
Copy JavaScript
document.querySelector('#itemsExample').items = [
  { type: 'option', content: 'option 1', value: 'option1' },
  { type: 'option', content: 'option 2', value: 'option2', disabled: true },
  { type: 'option', content: 'option 3', value: 'option3', selected: true }
];

Native multiselect
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-multiselect

<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect1" multiple>
      <option value="1">
        Duis voluptate 
      </option>
      <option value="2">
        Aliquip dolor 
      </option>
      <option value="3">
        Cupidatat ipsum 
      </option>
      <option value="4">
        Consequat consectetur 
      </option>
      <option value="5">
        Tempor enim 
      </option>
      <option value="6">
        Cillum in 
      </option>
      <option value="7">
        Magna esse 
      </option>
      <option value="8">
        Voluptate esse 
      </option>
      <option value="9">
        Anim irure 
      </option>
      <option value="10">
        Velit et 
      </option>
    </select>
  </div>
</div>
<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect1" multiple>
      <option value="1">
        Deserunt minim 
      </option>
      <option value="2">
        Tempor occaecat 
      </option>
      <option value="3">
        Irure exercitation 
      </option>
      <option value="4">
        In ut 
      </option>
      <option value="5">
        Cupidatat anim 
      </option>
      <option value="6">
        Cillum est 
      </option>
      <option value="7">
        Eu commodo 
      </option>
      <option value="8">
        Officia dolor 
      </option>
      <option value="9">
        Aute sit 
      </option>
      <option value="10">
        Esse ad 
      </option>
    </select>
  </div>
</div>
JavaScript
Copy JavaScript
AVAILABLE FIELDS

Limited size
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-multiselect-large

<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Reprehenderit reprehenderit 
      </option>
      <option value="2">
        Sint id 
      </option>
      <option value="3">
        Quis ut 
      </option>
      <option value="4">
        Ipsum deserunt 
      </option>
      <option value="5">
        Laboris ea 
      </option>
      <option value="6">
        Veniam exercitation 
      </option>
      <option value="7">
        In lorem 
      </option>
      <option value="8">
        Exercitation et 
      </option>
      <option value="9">
        Sunt in 
      </option>
      <option value="10">
        Cillum dolore 
      </option>
    </select>
  </div>
</div>
<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Aliqua elit 
      </option>
      <option value="2">
        Anim in 
      </option>
      <option value="3">
        Sit nostrud 
      </option>
      <option value="4">
        Lorem ipsum 
      </option>
      <option value="5">
        Id fugiat 
      </option>
      <option value="6">
        Reprehenderit non 
      </option>
      <option value="7">
        Veniam ea 
      </option>
      <option value="8">
        Ad et 
      </option>
      <option value="9">
        Laboris velit 
      </option>
      <option value="10">
        Magna amet 
      </option>
    </select>
  </div>
</div>
JavaScript
Copy JavaScript
AVAILABLE FIELDS

Empty state
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-multiselect__emptystate

<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <div class="e-multiselect__emptystate">
      No available item
    </div>
  </div>
</div>
<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <div class="e-multiselect__emptystate">
      No available item
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
AVAILABLE FIELDS
No available item

Double
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Dolore cillum 
      </option>
      <option value="2">
        Proident culpa 
      </option>
      <option value="3">
        Quis officia 
      </option>
      <option value="4">
        Sint ad 
      </option>
      <option value="5">
        Ut cillum 
      </option>
      <option value="6">
        Veniam officia 
      </option>
      <option value="7">
        Laboris enim 
      </option>
      <option value="8">
        Anim cillum 
      </option>
      <option value="9">
        Consequat culpa 
      </option>
      <option value="10">
        Velit deserunt 
      </option>
    </select>
  </div>
  <div class="e-multiselect__buttons">
    <div class="e-btn e-btn-onlyicon" onclick="MoveRight()">
      <e-icon icon="e-angle-double-right"></e-icon>
    </div>
    <div class="e-btn e-btn-onlyicon" onclick="MoveLeft()">
      <e-icon icon="e-angle-double-left"></e-icon>
    </div>
  </div>
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      FIELDS FOR THE EXPORT
    </div>
    <select class="e-multiselect__select" id="chosen_elements" name="chosen_elements" multiple>
      <option value="1">
        Laborum sit 
      </option>
      <option value="2">
        Velit aute 
      </option>
      <option value="3">
        Magna reprehenderit 
      </option>
      <option value="4">
        Enim anim 
      </option>
      <option value="5">
        Enim aliqua 
      </option>
    </select>
  </div>
</div>
<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Sed cillum 
      </option>
      <option value="2">
        In elit 
      </option>
      <option value="3">
        Proident eiusmod 
      </option>
      <option value="4">
        Nisi eu 
      </option>
      <option value="5">
        Deserunt laborum 
      </option>
      <option value="6">
        Excepteur nulla 
      </option>
      <option value="7">
        Aliquip voluptate 
      </option>
      <option value="8">
        Culpa lorem 
      </option>
      <option value="9">
        Ullamco nulla 
      </option>
      <option value="10">
        Est qui 
      </option>
    </select>
  </div>
  <div class="e-multiselect__buttons">
    <div class="e-btn e-btn-onlyicon" onclick="MoveRight()">
      <e-icon icon="e-angle-double-right"></e-icon>
    </div>
    <div class="e-btn e-btn-onlyicon" onclick="MoveLeft()">
      <e-icon icon="e-angle-double-left"></e-icon>
    </div>
  </div>
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      FIELDS FOR THE EXPORT
    </div>
    <select class="e-multiselect__select" id="chosen_elements" name="chosen_elements" multiple>
      <option value="1">
        Reprehenderit laborum 
      </option>
      <option value="2">
        Magna id 
      </option>
      <option value="3">
        Sit tempor 
      </option>
      <option value="4">
        Cillum elit 
      </option>
      <option value="5">
        Exercitation proident 
      </option>
    </select>
  </div>
</div>
JavaScript
Copy JavaScript
AVAILABLE FIELDS
FIELDS FOR THE EXPORT

API Reference e-multiselect

Properties

NameDescriptionTypeRequiredDefault value
valueGet selected value of multiselect.false
disabledSet disable state of multiselect.booleanfalse
invalidSet disable state of invalid.booleanfalse
placeholderDefines placeholder.string-
always-show-searchShow search input ven if there's not more then 8 optionsbooleanfalse
itemsSet options for multiselect. See example above.[]

Events

EventDescriptionReturns
changeFires on option selection change.{ detail: { selectedOptions: [options] } }
searchFires on input in search field. Make sure selected items are included in filtered items{ detail: { value: [value] } }
closeFires on close.

API Reference e-select-option

Properties

NameDescriptionTypeRequiredDefault value
valueDefines option valuestring-
selectedSet option to default selectedbooleanfalse
disabledSet option to disabled.booleanfalse

Related components

Select

Multiselect

Multiselect allows marketers to search and select multiple items from a list of options.

Anatomy

Multiselect structure
  1. Label - Should be clean and concise. Sentence case, no colons.
  2. Tag - Tags display the selected options.
  3. Trigger - The whole select field indicated with white background and the caret works as interaction zone. Clicking it opens the list of options, and also a search input above 8 items.
  4. Search input - Enables searching in the list, even for disabled elements.
  5. List of options - Options predefined by the product should be written in sentence case. Options based on user input - like campaign names, should appear in the list without any additional formatting applied on the string.

Best practices

  • Sort the items in logical order e.g. descending based on date modified. Note that sorting based on alphabetical order hardly works with localisation.
  • Best to use when the amount of options depend on user input. For predefined options with maximum 6 items, consider using Checkboxes instead.
  • For selecting only a single choice from a list of options, use Select or Radio buttons instead.

Grouping

Make specific groups of items visually distinctive by breaking down data into subsections. Titles of these sections appear in smaller, uppercase text and are not selectable.

Multiselect grouping
  1. Category
  2. List item

Avoid adding items to the “Other” category. The existence of this category signals, that further conceptual mapping is required.

Selection

Selected items get a highlighted background and a checkmark icon in the list. At the same time they also appear as tags in the Select component’s field. Tags always appear in chronological order of selection. They can either be removed by clicking on the close icon on the tag, or by clicking on the selected item in the list.

List stored on a server

When list items are stored on a server, use the following simple pattern to prevent performance issues: when the component is focused, ask the user to enter at least 3 adjacent letters. This way the server will only have to return a manageable amount of data.

Multiselect server-side search

If the ‘Recognition rather than recall’ principle is of foremost importance for your product, consult the Frontend team to find an optimal solution.