Toggle switch (widget)
A toggle switch is a graphical control element that allows the user to make a choice between two mutually exclusive states (such as on/off). Originally toggle switches were used primary in touchscreen-based user interfaces, but they have later become commonplace in desktop and web applications.
.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}
On/off states of GTK's toggle switch widget.
A toggle switch is a graphical control element that allows the user to make a choice between two mutually exclusive states (such as on/off). Originally toggle switches were used primary in touchscreen-based user interfaces, but they have later become commonplace in desktop and web applications.
Toggle switches have a similar function as checkboxes, but unlike checkboxes, interacting with a toggle switch usually has an immediate effect on the application or system.
An animated toggle switch widget, demonstrating the ambiguous state problem.
Early research on touchscreen interfaces has identified usability issues with toggle switches. A common problem is ambiguous state indication: for example does the label "on" indicate the current state of the switch or the resulting state after interacting with it. Communicating affordance can also be difficult: for example should the user tap or slide the switch to change its state.
.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}body.skin-vector-2022 .mw-parser-output .reflist-columns-2{column-width:27em}body.skin-vector-2022 .mw-parser-output .reflist-columns-3{column-width:22.5em}.mw-parser-output .references[data-mw-group=upper-alpha]{list-style-type:upper-alpha}.mw-parser-output .references[data-mw-group=upper-roman]{list-style-type:upper-roman}.mw-parser-output .references[data-mw-group=lower-alpha]{list-style-type:lower-alpha}.mw-parser-output .references[data-mw-group=lower-greek]{list-style-type:lower-greek}.mw-parser-output .references[data-mw-group=lower-roman]{list-style-type:lower-roman}.mw-parser-output div.reflist-liststyle-upper-alpha .references{list-style-type:upper-alpha}.mw-parser-output div.reflist-liststyle-upper-roman .references{list-style-type:upper-roman}.mw-parser-output div.reflist-liststyle-lower-alpha .references{list-style-type:lower-alpha}.mw-parser-output div.reflist-liststyle-lower-greek .references{list-style-type:lower-greek}.mw-parser-output div.reflist-liststyle-lower-roman .references{list-style-type:lower-roman}
- @media screen{html.skin-theme-clientpref-night .mw-parser-output .sister-inline-image img[src*="Wiktionary-logo-en-v2.svg"]{filter:invert(1)brightness(55%)contrast(250%)hue-rotate(180deg)}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sister-inline-image img[src*="Wiktionary-logo-en-v2.svg"]{filter:invert(1)brightness(55%)contrast(250%)hue-rotate(180deg)}} Media related to Toggle switches (GUI) at Wikimedia Commons