Toggle
A toggle is a two-state switch that lets users choose between opposing options, such as on/off or enabled/disabled.
Philosophy
Toggles provide an immediate way to adjust settings or states without additional confirmation.
They represent binary choices.
They provide instant feedback on the current state.
They keep controls simple and efficient for frequent actions.
Anatomy
Variants
Standard Toggle
Horizontal switch (most common).
States
Off (Idle)
Thumb on the left, track inactive.
On
Thumb on the right, track highlighted.
Usage tips
Dos
Use toggles for binary states that take effect immediately.
Always include a clear label so the user knows what the toggle controls.
Place toggles in settings, lists, or forms where quick changes are useful.
Don’ts
Don’t use toggles for one-time actions (use buttons instead).
Don’t overload screens with too many toggles — group related options.
Real-world example
