Multiselect
When to use it
The Multiselect component is a CSS component primarily used within Tickster Manager (where it is accompanied by a local Vue component, for interactivity). It's a good fit when you want to style lists where users are supposed to select multiple options from a list and to another. It is commonly used in forms where multiple selections are required, such as selecting multiple events or products.
Variants
The Multiselect component can be used as a "single select" too, by only using the left hand side of the markup.
TIP
The component follows --surface-color when it is provided by a parent container. This means it will automatically blend into surfaces such as Card, while still falling back to its default surface color when used on its own.
What it looks like
Code examples
html
<div class="o-grid o-grid--gap-xl">
<div class="o-grid__col-6">
<ul class="c-multi-select">
<li tabindex="0"><b>Färjestad BK - Frölunda HC</b> <span>Lör, 2020-10-17, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - Örebro</b> <span>Tor, 2020-10-22, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - Rögle</b> <span>Tis, 2020-10-27, kl 18:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - Leksand</b> <span>Tis, 2020-11-10, kl 18:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - Djurgården</b> <span>Lör, 2020-11-14, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - HV71</b> <span>Lör, 2020-11-21, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - HV71</b> <span>Lör, 2021-02-20, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Färjestad BK - Leksand</b> <span>Tor, 2021-02-25, kl 18:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Semifinal 1</b> <span>Lör, 2021-03-27, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Semifinal 2</b> <span>Lör, 2021-03-27, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Semifinal 3</b> <span>Lör, 2021-03-27, kl 17:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>CHL match 5</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>CHL match 3</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>CHL match 1</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>CHL match 2</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>CHL match 4</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>FRAMÅT OCH UPPÅT - TILLSAMMANS!</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Final 1</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Final 3</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Final 4</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
<li tabindex="0"><b>Final 2</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--positive">+</button></li>
</ul>
</div>
<div class="o-grid__col-6">
<ul class="c-multi-select c-multi-select--draggable">
<li tabindex="0" draggable="true"><b>CHL match 2</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0" draggable="true"><b>CHL match 4</b> <span>Sön, 2021-04-25, kl 16:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0" draggable="true"><b>Final 2</b> <span>Fre, 2021-04-30, kl 16:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
</ul>
</div>
</div>html
<div class="c-card">
<div class="c-card__body">
<h2 class="c-card__title">Selected events</h2>
<ul class="c-multi-select">
<li tabindex="0"><b>Event 1</b> <span>Friday, 19:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 2</b> <span>Saturday, 20:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 3</b> <span>Sunday, 18:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 4</b> <span>Monday, 19:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 5</b> <span>Tuesday, 19:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 6</b> <span>Wednesday, 19:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
<li tabindex="0"><b>Event 7</b> <span>Thursday, 19:00</span> <button type="button" class="c-button c-button--negative">-</button></li>
</ul>
</div>
</div>Accessibility notes
The draggable attribute (which doesn't do anything by itself – in Manager it's used by the JS code for reordering items) is, as always with drag and drop, not great for accessibility. If reordering items is a key functionality within the application, consider adding alternataive ways to reorder too, e.g. using arrow buttons up/down or similar.