Toggles
States
Toggles are usually used for on/off functions where the use case is simply turning something on or off. Optionally you can show sub-settings when the toggle is turned on.
Off - Default
The default state for all inputs, and textareas.
Off - Disabled
The toggle off & disabled state.
On - Active
The toggle on / active state.
On - Disabled
The toggle is on but in disabed state.
Variations
Toggles can be used with and without description, or there might be cases when you just need the toggle without the label.
Label - Default
By default toggles must have a label.
Label - Hidden
The label is visually hidden but available for screen readers.
Description - Default
The toggle with label and description.
Settings
Some toggles may need to show additional settings when turned on.
Off - Default
The default state keeps the settings hidden.
On - Active
Once toggle is active settings are shown.