Switches

Use a switch for an immediately applied on/off setting. Preserve the native checkbox so keyboard, focus, checked, disabled, and right-to-left behavior work.

Switches Modifiers

• Put the label and switch at opposite edges.

  .form-switch--block

• Vertically center the control and label.

  .form-switch--vertical-center

• Align the control with the first line.

  .form-switch--vertical-start

• Use the small switch size.

  .form-switch--sm

• Use the large switch size.

  .form-switch--lg