Toggle
A toggle is very similar to a checkbox - it represents either
True or False, yes or no, enabled or disabled, etc.
With that said, they could be on:
On
or off:
Off
Since we don't have much space for text on these, we could also include a tooltip:
With Tooltip
Some longer description about what the toggle does. By the way, we can also add attributes to the question mark icon, such as changing the color on it
Sometimes we might not want the user to be able to click on them, so we can make them disabled:
Disabled and on
Disabled and off
We might also show an error if the toggle is required:
With error
Some error that needs to be addressed
And finally, here's an example you can play with:
Live example