Change the Switch Layout

With the new Switch variables that were introduced in the latest release, the default styling of the Switch component for each of the SASS themes can be modified to match the desired layout.

This article demonstrates how to tweak the variables and achieve any of the additional predefined layouts of the Switch component.

• Default Theme
  • Default Layout
  • Default Version 1
    • DefaultV1 Layout
    • DefaultV1 Code
  • Default Version 2
    • DefaultV2 Layout
    • DefaultV2 Code
  • Default Version 3
    • DefaultV3 Layout
    • DefaultV3 Code
  • Default Version 4
    • DefaultV4 Layout
    • DefaultV4 Code
• Material Theme
  • Material Layout
  • Material Version 1
    • MaterialV1 Layout
    • MaterialV1 Code
  • Material Version 2
    • MaterialV2 Layout
    • MaterialV2 Code
  • Material Version 3
    • MaterialV3 Layout
    • MaterialV3 Code
• Bootstrap Theme
  • Bootstrap Layout
  • Bootstrap Version 1
    • BootstrapV1 Layout
    • BootstrapV1 Code
  • Bootstrap Version 2
    • BootstrapV2 Layout
    • BootstrapV2 Code
  • Bootstrap Version 3
    • BootstrapV3 Layout
    • BootstrapV3 Code
  • Bootstrap Version 4
    • BootstrapV4 Layout
    • BootstrapV4 Code
  • Bootstrap Version 5
    • BootstrapV5 Layout
    • BootstrapV5 Code

Default Theme

Default Layout

Default Version 1

DefaultV1 Layout

DefaultV1 Code

$switch-container-border-width: 1px;
$switch-container-padding-x: 2px;

$switch-handle-size: 2.4em;

$switch-container-shadow: null;
$switch-container-hovered-shadow: null;
$switch-container-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);

$switch-on-bg: white;
$switch-on-text: $base-text;
$switch-on-border: $base-border;

$switch-on-hovered-bg: $switch-on-bg;
$switch-on-hovered-border: rgba(0, 0, 0, 0.15);

$switch-on-handle-bg: $accent;
$switch-on-handle-border: $switch-on-handle-bg;

$switch-on-handle-hovered-bg: shade( $accent );
$switch-on-handle-hovered-border: $switch-on-handle-hovered-bg;

$switch-off-border: $base-border;

$switch-off-hovered-border: rgba(0, 0, 0, 0.15);

$switch-off-handle-bg: darken( white, 5 );
$switch-off-handle-border: $base-border;

$switch-off-handle-hovered-bg: darken( white, 7 );
$switch-off-handle-hovered-border: rgba(0, 0, 0, 0.15);

Default Version 2

DefaultV2 Layout

DefaultV2 Code

$switch-border-radius: 2px;

$switch-container-border-width: 1px;
$switch-container-padding-x: 2px;

$switch-handle-size: 2.4em;
$switch-handle-border-radius: 1px;

$switch-container-shadow: null;
$switch-container-hovered-shadow: null;
$switch-container-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);

$switch-on-bg: white;
$switch-on-text: $base-text;
$switch-on-border: $base-border;

$switch-on-hovered-bg: $switch-on-bg;
$switch-on-hovered-border: rgba(0, 0, 0, 0.15);

$switch-on-handle-bg: darken( $accent, 5 );
$switch-on-handle-border: $switch-on-handle-bg;

$switch-on-handle-hovered-bg: shade( $accent );
$switch-on-handle-hovered-border: $switch-on-handle-hovered-bg;

$switch-off-border: $base-border;

$switch-off-handle-bg: darken( white, 5 );
$switch-off-handle-border: $base-border;

$switch-off-handle-hovered-bg: darken( white, 7 );
$switch-off-handle-hovered-border: rgba(0, 0, 0, 0.15);

Default Version 3

DefaultV3 Layout

DefaultV3 Code

$switch-track-size: 1.8em;

$switch-handle-size: 3em;
$switch-handle-border-width: 0;

$switch-container-hovered-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
$switch-container-focused-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 0 3px rgba(0, 0, 0, .06);

$switch-on-handle-border: null;
$switch-on-handle-shadow: inset 0 0 0 1px $base-border;

$switch-on-handle-hovered-border: null;

$switch-off-focused-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);

$switch-off-handle-shadow: inset 0 0 0 1px $base-border;

Default Version 4

DefaultV4 Layout

DefaultV4 Code

$switch-label-display: none;

$switch-on-hovered-bg: shade( $accent );

$switch-on-handle-bg: white;

$switch-on-handle-hovered-bg: $switch-on-handle-bg;

$switch-off-bg: darken( white, 5 );

$switch-off-hovered-bg: darken( white, 7 );

Material Theme

Material Layout

Material Version 1

MaterialV1 Layout

MaterialV1 Code

$switch-size: 6em;

$switch-track-size: 3em;
$switch-container-padding-x: 3px;

$switch-label-display: inline;
$switch-label-outer-spacing: 8px;
$switch-label-text-transform: capitalize;

$switch-container-shadow: inset 0 0 0 1px rgba(black, .42);
$switch-container-hovered-shadow: inset 0 0 0 1px rgba(black, .87);
$switch-container-focused-shadow: inset 0 0 0 1px $accent;

$switch-on-bg: white;
$switch-on-text: $text-color;

$switch-on-focused-bg: $switch-on-bg;

$switch-on-hovered-bg: white;

$switch-off-bg: white;
$switch-off-text: $text-color;

$switch-off-focused-bg: $switch-off-bg;

$switch-off-hovered-bg: white;

$switch-off-handle-bg: rgba(black, .38);

$switch-off-handle-hovered-bg:  rgba(black, .5);

Material Version 2

MaterialV2 Layout

MaterialV2 Code

$switch-size: 6em;

$switch-track-size: 3em;
$switch-container-padding-x: 2px;

$switch-on-bg: $accent;

$switch-on-hovered-bg: lighten( $accent, 8);

$switch-on-hovered-bg: lighten( $accent, 8);

$switch-on-handle-bg: white;
$switch-on-handle-shadow: null;

$switch-off-handle-bg: white;

Material Version 3

MaterialV3 Layout

MaterialV3 Code

$switch-size: 6em;

$switch-track-size: 3em;
$switch-container-padding-x: 2px;

$switch-label-display: inline;
$switch-label-outer-spacing: 8px;
$switch-label-text-transform: capitalize;

$switch-on-bg: $accent;

$switch-on-focused-bg: lighten( $accent, 8);

$switch-on-hovered-bg: lighten( $accent, 8);

$switch-on-handle-bg: white;
$switch-on-handle-shadow: null;

$switch-off-handle-bg: white;

Bootstrap Theme

Bootstrap Layout

Bootstrap Version 1

BootstrapV1 Layout

BootstrapV1 Code

$switch-label-display: inline;
$switch-label-text-transform: capitalize;

$switch-container-shadow: inset 0 0 0 1px darken($button-bg, 7);
$switch-container-focused-shadow: none;

$switch-on-bg: white;
$switch-on-text: $text-color;
$switch-on-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-on-hovered-bg: white;

$switch-on-handle-bg: $accent;

$switch-on-handle-hovered-bg: darken($accent, 8);

$switch-off-bg: white;
$switch-off-text: $text-color;
$switch-off-border: darken($button-bg, 7);
$switch-off-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-off-hovered-bg: white;

$switch-off-handle-bg: $button-bg;

$switch-off-handle-hovered-bg: darken($button-bg, 8);

Bootstrap Version 2

BootstrapV2 Layout

BootstrapV2 Code

$switch-container-padding-x: 1px;

$switch-handle-size: 2.5em;

$switch-label-display: inline;
$switch-label-text-transform: capitalize;

$switch-container-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
$switch-container-focused-shadow: none;

$switch-on-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-on-hovered-bg: darken($accent, 8);
$switch-on-hovered-text: white;

$switch-on-handle-bg: $button-bg;

$switch-on-handle-hovered-bg: darken($button-bg, 8);

$switch-off-bg: white;
$switch-off-text: $text-color;
$switch-off-border: darken($button-bg, 7);
$switch-off-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-off-hovered-bg: white;

$switch-off-handle-bg: $button-bg;

$switch-off-handle-hovered-bg: darken($button-bg, 8);

Bootstrap Version 3

BootstrapV3 Layout

BootstrapV3 Code

$switch-track-size: 2em;
$switch-container-padding-x: 0;

$switch-handle-size: 2.5em;

$switch-label-display: inline;
$switch-label-text-transform: capitalize;

$switch-container-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
$switch-container-focused-shadow: inset 0 0 0 3px lighten($accent, 25);

$switch-on-focused-shadow: false;

$switch-on-hovered-bg: darken($accent, 8);
$switch-on-hovered-text: white;

$switch-on-handle-bg: $button-bg;
$switch-on-handle-border: $button-bg;

$switch-on-handle-hovered-bg: darken($button-bg, 8);
$switch-on-handle-hovered-border: darken($button-bg, 8);

$switch-off-bg: white;
$switch-off-text: $text-color;
$switch-off-border: darken($button-bg, 7);

$switch-off-hovered-bg: white;

$switch-off-handle-bg: $button-bg;
$switch-off-handle-border: $button-bg;

$switch-off-handle-hovered-bg: darken($button-bg, 8);
$switch-off-handle-hovered-border: darken($button-bg, 8);

Bootstrap Version 4

BootstrapV4 Layout

BootstrapV4 Code

$switch-border-radius: 0;

$switch-handle-border-radius: 0;
$switch-handle-border-width: 1px;

$switch-label-display: inline;
$switch-label-text-transform: capitalize;

$switch-container-shadow: inset 0 0 0 1px darken($button-bg, 7);
$switch-container-focused-shadow: none;

$switch-on-bg: white;
$switch-on-text: $text-color;
$switch-on-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-on-hovered-bg: white;

$switch-on-handle-bg: $accent;
$switch-on-handle-border: $switch-on-handle-bg;

$switch-on-handle-hovered-bg: darken($accent, 8);
$switch-on-handle-hovered-border: darken($switch-on-handle-hovered-bg, 2);

$switch-off-bg: white;
$switch-off-text: $text-color;
$switch-off-border: darken($button-bg, 7);
$switch-off-focused-shadow: 0 0 0 3px rgba($accent, 0.5);

$switch-off-hovered-bg: white;

$switch-off-handle-bg: $button-bg;
$switch-off-handle-border: $switch-off-handle-bg;

$switch-off-handle-hovered-bg: darken($button-bg, 8);
$switch-off-handle-hovered-border: darken($switch-off-handle-hovered-bg, 2);

Bootstrap Version 5

BootstrapV5 Layout

BootstrapV5 Code

$switch-label-display: inline;
$switch-label-text-transform: capitalize;