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.
To override the background color, use the --surface-color CSS variable.
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>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.