Switch component

[antictor]

The switch component is a form component used to record a selection from a number of values. With regards to behaviour, a switch can be thought of like a radio field, allowing a single choice from a small number of options. The different between a switch and radio is presentation, a switch looks similar to a button group.

A switch should use markup for a field group, complete with legend to act as the label for the range of options.

The switch will need to be compatible with Formik.

Not sure how a switch should present on mobile, this depends how inputs should size. Should they go full width?

[hxltrhuxze]

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.

[09txzS1qs]

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?

[m7kvqbe1]

This is now in active development.

[m7kvqbe1]

WIP @ #266