Sometime ago I needed to implement a toggle control. I wanted to make it accessible, so I read Heydon Pickering's fantastic article Inclusive Toggle Buttons. In the article, he gave examples of a notify by email toggle control using both a checkbox and a button. This got me thinking, what's the difference between a checkbox and a button for a toggle control? When would you use one over the other?
After scouring the internet, I was finally able to find a satisfactory explanation from the Microsoft UWP design docs.
- Use a toggle switch for binary settings when changes become effective immediately after the user changes them.
- Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box.
In other words, use a button for changes that should happen immediately and a checkbox for changes that should take place after the user submits them.
When I thought about it this way, these guidelines reminded me of the guidelines for when to use a button vs when to use a link.
Use a button to trigger interactions on the page and a link to navigate or retrieve information.
In both cases, a button is used to trigger an action.
To be sure my new findings would be inclusive, I asked the experts on the A11y Slack channel. They confirmed that a checkbox would typically be used inside a form (where the user would submit it) and a button would perform an action.
Going back to the notify by email toggle control example, it can be written as either a checkbox or a button. Depending on the context in which it is used will determine how it should be coded.