Checkboxes, radios and toggles provide users with different selection and activation tools.
A checkbox is a component that allows the user selecting something writen in its associatead text label. A list of consecutive checkboxes would allow the user to select multiple things.
A radio button is a component that allows the user selecting something writen in its associatead text label. A list of consecutive radio buttons would allow the user to select just one thing.
It is a common case of doubt when to use radios or a dropdown menu instead when users need to choose one item out of a list of options. There is not a fixed rule for that but we propose this guidelines.
A toogle is an interface element that by its activation or deactivation provokes a inmediate action in the screen.
Use doubt cases
Use a radio button or drop down rather than an on/off switch if the two states in question are separate options.
In confirmation messages use always a checkbox instead of a toggle as it is a single binary option.
This type of toggles have labels around as the title label or other support label that make more explicit the switch value. The support label can be either at the top, right, bottom or left and its value should change with the toggle state change as the example shows. All the labels have the interaction that the switch have making the toggle more accessible.
Toggles can also have an icon inside the toggle circle that helps to identify the action. A toggles with icon can also have data attributes as the previous variation.