Vanilla
CSS/SCSS
The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.
CSS/SCSS
CSS/SCSS
Typescript
Typescript
CSS/SCSS
Checkboxes are used when users can select any number of choices, including zero, one, or several options. This means that each checkbox is independent of all other checkboxes and checking one box does not uncheck the others.
A stand-alone checkbox is used for a single option that the user can turn on or off.
Checkboxes are mainly used for when users should change settings or confirm actions, such as selecting or deselecting if they want newsletters. When using checkboxes to confirm an action, it can be useful to add an extra step or action. One example is when users should accept the terms and conditions. Then it is common to have a checkbox to confirm the action and a button to submit the answer.
To make it easier for users to use the checkbox, the label should also be clickable.
Read about Pattern: Dark mode