Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.

Toggle switches

Toggle switches signal an instant choice to the user.

toggle switches visual example in non-selected state
toggle switches visual example in selected state

Using toggle switches

Toggle switches must feature a descriptive label. Use toggle switches only where instant change in the user-interface based on their assigned action is intended. For non-instant selections and selection groups use checkboxes.


toggle switches design properties

Toggle switch
Toggle switches make the selection visually distinct. In selected state, filled Accent50 background with Base100 foreground together with the toggle handle moved to the opposite side signifies a clear distinction from unselected state.

Toggle switch label
Its labels should be short, with text that clearly states what action is selected.

See WikimediaUI Figma toggle switches component.

States of toggle switches

The styles for toggle switch states were designed with accessible color variations, additional to the toggle handle to distinguish the toggle switch following visually separated states in selected or unselected mode (e.g. disabled, hover, active).:

toggle switches visual design and states


See OOUI's demos section of toggle switches.