Toggle switch component

[ellabishop]

What

An on/off toggle button that allows the user to make a change to that page immediately, without the need to submit an answer or navigate away from the current page.

Why

On the 'Video appointment service' project, there was a user need to change a setting on the page (microphone - on/off and camera - on/off). We have done 5 rounds of research with a variety of iterations and users and have concluded that a toggle switch design is the most recognisable, usable and understandable. We initially tested with components already in the GOV.UK design system (buttons with text, buttons with icons and text and radio buttons) but users with low digital confidence struggled to know the current state of the buttons, and radios and checkboxes are an input that needs submitting, rather than having an immediate effect on the page. (https://www.nngroup.com/articles/toggle-switch-guidelines/)

In our latest round of research, everyone understood and could use the toggle buttons designed. They have also been thoroughly accessibility tested. I have not seen any other examples of toggles across government services (except for the NHS app).
It is worth noting they currently rely on javascript which is acceptable on the 'Video appointment service' as javascript is required to take part in the video appointment.

Anything else

Mural board on iterations and high level research findings:

Addition of colour and shape has been found to increase understanding of current state.

[stevenjmesser]

It looks like Apple is experimenting with switches as a variant of checkboxes. There’s some interesting links shared in whatwg/html#9546. They also said:

Generally, we recommend using a switch when the end user understands the user interface element as a setting that is either “on” or “off”. A checkbox is well suited for when the end user would understand the element as something to be selected.

Are these mostly used in settings pages? Do they apply mostly to application UIs, accounts & settings, rather than transactional services?