Toggle switches
Toggle switches signal an instant choice to the user.
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.
Designing
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.
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).:
