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

Customizing Switch

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
$kendo-switch-thumb-border-widthNumber1px1px
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformStringuppercaseuppercase
Description
The text transform of the Switch label.
$kendo-switch-label-displayStringinlineinline
Description
The display of the Switch label.
$kendo-switch-sizesMap( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))
Description
The map with the different Switch sizes.
$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textColor$kendo-component-text#424242
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderColorif($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))#ebebeb
Description
The border color of the track when the Switch is not checked.
$kendo-switch-off-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))2px solid rgba(0, 0, 0, 0.08)
Description
The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bgColor$kendo-base-bg#fafafa
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textColor$kendo-base-text#424242
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bgColor$kendo-color-primary#ff6358
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))white
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-borderColor$kendo-switch-on-track-bg#ff6358
Description
The border color of the track when the Switch is checked.
$kendo-switch-on-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is checked.
$kendo-switch-on-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))2px solid rgba(255, 99, 88, 0.25)
Description
The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bgColor$kendo-base-bg#fafafa
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textColor$kendo-base-text#424242
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is checked.

In this article

Not finding the help you need?