Switch
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 inset-mode property explicitly to enable inset fill style appearance.
Inset Outlined
Use inset-outlined property explicitly to enable outline inset fill 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.
Switch States
TIP
Any MDBootstrap Color variants and Material Color variants can be applied to the color property.
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 style 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
Added since v2.0.0--md-switch-margin: .5rem .25rem;
--md-switch-thumb-bg: #fafafa;
--md-switch-thumb-color: #fafafa;
--md-switch-thumb-size: 20px;
--md-switch-touch-size: 40px;
--md-switch-track-color: #bdbdbd;
--md-switch-track-height: 14px;
--md-switch-track-width: 38px;
--md-switch-inset-thumb-size: 24px;
--md-switch-inset-track-height: 32px;
--md-switch-inset-track-width: 52px;
--md-switch-outlined-thumb-color: #6c757d;
--md-switch-outlined-thumb-size: 18px;
--md-switch-outlined-stroke: 1.5px;
--md-switch-outlined-stroke-color: #6c757d;
--md-switch-outlined-track-color: #e0e0e0;
--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: #{rgba($color, .38)};
--md-switch-active-inset-track-color: #{color.scale($color, $lightness: 60%)};
--md-switch-active-inset-thumb-bg: #{$thumb-bg};
--md-switch-active-inset-thumb-color: #{$thumb-color};