Switch Button
BsSwitch is a component that let users toggle the selection of an item on or off.
Overview
BsSwitch component mimics the HTML5 <input type="checkbox"> behaviour. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.
States
<bs-switch> component has states: disabled and readonly. Use their respective property to enable the state.
Style Variants
You can style <bs-switch> to your own preference or use a style variant based on Google Material Design 2 or Material Design 3 specifications.
Default
<bs-switch> default style is based on Google Material Design 2 specifications.
Inset
Use the variant property and set its value to inset to enable the Inset style appearance. This style variant have an appearance that follows Google Material Design 3 specifications.
Outline Inset
Use the variant property and set its value to outline-inset to enable the Outline Inset style appearance. This style variant have an appearance that follows Google Material Design 3 specifications.
Colors
Use color property to change <bs-switch> color appearance.
Thumb Icon
Use checkoff-icon or checked-icon property explicitly to enable icon on <bs-switch> thumb.
INFO
checkoff-iconworks only on Inset style variant.checked-iconworks only on Inset or Inset Outlined style variant.
Label Position
Use label-position property to change <bs-switch> label positioning. Additionally, use label-class property to fine tune the field label with css classes.
CSS Variables
As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-switch for better customization.
.md-switch {
--md-switch-box-shadow: #{vars.$switch-shadows};
--md-switch-margin: #{vars.$switch-margin};
--md-switch-thumb-bg: #{colors.$neutral-lighten-5};
--md-switch-thumb-color: #{colors.$neutral-lighten-5};
--md-switch-thumb-size: #{vars.$switch-thumb-size};
--md-switch-touch-size: #{vars.$switch-touch-size};
--md-switch-track-color: #{colors.$neutral-lighten-2};
--md-switch-track-height: #{vars.$switch-track-height};
--md-switch-track-width: #{vars.$switch-track-width};
--md-switch-inset-thumb-size: #{vars.$switch-inset-thumb-size};
--md-switch-inset-track-height: #{vars.$switch-inset-track-height};
--md-switch-inset-track-width: #{vars.$switch-inset-track-width};
--md-switch-outlined-thumb-color: #{colors.$gray-500};
--md-switch-outlined-thumb-size: #{vars.$switch-outlined-thumb-size};
--md-switch-outlined-stroke: #{vars.$switch-outline-stroke};
--md-switch-outlined-stroke-color: #{colors.$gray-500};
--md-switch-outlined-track-color: #{colors.$neutral-lighten-3};
--md-switch-disabled-box-shadow: #{vars.$switch-disabled-shadows};
--md-switch-disabled-thumb-bg: #{colors.$neutral-lighten-2};
--md-switch-disabled-thumb-color: #{colors.$neutral-base};
--md-switch-disabled-track-color: #{colors.$gray-300};
--md-switch-active-box-shadow: #{0 0 6px -1px rgba(#000, .13), 0 1px 1px 1px rgba($color, .15), 0 1px 3px 0 rgba(#000, .2)};
--md-switch-active-thumb-bg: #{$color};
--md-switch-active-thumb-color: #{$color};
--md-switch-active-track-color: #{color.change($color, $alpha: 0.38)};
--md-switch-active-inset-track-color: #{$track-color};
--md-switch-active-inset-thumb-bg: #{$thumb-bg};
--md-switch-active-inset-thumb-color: #{$thumb-color};
--md-switch-active-outlined-stroke-color: #{color.change($track-color, $alpha: 0.15)};
}