New to Kendo UI for Vue? Start a free 30-day trial

Customizing Switch

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-switch-font-familyNull

null

null

Description
Font family of the switch.
$kendo-switch-track-border-widthNumber

1px

1px

Description
Border width of the switch track.
$kendo-switch-thumb-border-widthNull

null

null

Description
Border width of the switch thumb.
$kendo-switch-label-text-transformNull

null

null

Description
Text transform of the switch label.
$kendo-switch-label-displayString

none

none

Description
Display of the switch label.
$kendo-switch-sizesMap

( sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) )

(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))

Description
Map with the different switch sizes.
$kendo-switch-off-track-bgColor

$component-bg

#ffffff

Description
The background of the track when the switch is not checked.
$kendo-switch-off-track-textNull

null

null

Description
The text color of the track when the switch is not checked.
$kendo-switch-off-track-borderColor

$gray-500

#adb5bd

Description
The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradientNull

null

null

Description
The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-borderColor

mix( $kendo-switch-off-track-bg, $primary )

#86b7fe

Description
The border color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ringList

.25rem solid rgba( $primary, .25 )

0.25rem solid rgba(13, 110, 253, 0.25)

Description
The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bgColor

if( $dark-theme, $gray-800, $gray-200 )

#e9ecef

Description
The background of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bgColor

$gray-500

#adb5bd

Description
The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-textNull

null

null

Description
The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-borderNull

null

null

Description
The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bgColor

$primary

#0d6efd

Description
The background of the track when the switch is checked.
$kendo-switch-on-track-textNull

null

null

Description
The text color of the track when the switch is checked.
$kendo-switch-on-track-borderColor

$kendo-switch-on-track-bg

#0d6efd

Description
The border color of the track when the switch is checked.
$kendo-switch-on-track-gradientNull

null

null

Description
The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-borderNull

null

null

Description
The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ringList

.25rem solid rgba( $kendo-switch-on-track-border, .25 )

0.25rem solid rgba(13, 110, 253, 0.25)

Description
The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bgColor

try-tint( $kendo-switch-on-track-bg, 50% )

#86b7fe

Description
The background of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bgColor

contrast-wcag( $kendo-switch-on-track-bg )

white

Description
The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-textNull

null

null

Description
The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-borderNull

null

null

Description
The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is checked.

In this article

Not finding the help you need?