## Switch usage guidlines

Do.

List multiple switches in a vertical list. If the containing block has text-align set to left the labels should always be on the right side of the switch. Always use plain labels, in the same line as the switch.

Caution.

In contained modules, not wider than 400 pixels, it is allowed to place labels on the left and align the switches to the right. This should be avoided though, as it makes it more difficult for the user to pair the labels with belonging switches. Consider placing label & switch pairs in dotted list items in such cases.

Don't.

Never list switches with the label on the left. Place labels to the left only if the containing block has text-align set to right.

Don't

Never list multiple switches in-line.

View react component React components