The Switch Component

The Switch component has 3 states - unselected, hovered, and selected.

• By default, there is always one item that has the selected state.
• Hovering on an item will add a small blue border to it.
• Clicking it will deselect the currently active item and add the Selected state to the item clicked.

Mobile

As we have limited screen real estate on mobile, changing the Switch to a Select seems most appropriate here. Vertically stacking the selection could be one option, however this will take up a significant amount of room.

Changes from original design

• Changed the overall style of the Switch to distance itself from a button group/button. As these have different effects for the user, we want to keep them visually separate.

from design-system.

The difference between Hover and Selected is quite subtle in terms of border width. I wonder if the hover could be lower contrast and the selected could have a slightly larger border and higher contrast?

from design-system.

This is now in active development.

from design-system.

WIP @ #266

from design-system.