Customizing Switch

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description Font family of the switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description Border width of the switch track.
$kendo-switch-thumb-border-width	Null	`null`	`null`
Description Border width of the switch thumb.
$kendo-switch-label-text-transform	Null	`null`	`null`
Description Text transform of the switch label.
$kendo-switch-label-display	String	`none`	`none`
Description Display of the switch label.
$kendo-switch-sizes	Map	`( 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-bg	Color	`$component-bg`	`#ffffff`
Description The background of the track when the switch is not checked.
$kendo-switch-off-track-text	Null	`null`	`null`
Description The text color of the track when the switch is not checked.
$kendo-switch-off-track-border	Color	`$gray-500`	`#adb5bd`
Description The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-border	Color	`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-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ring	List	`.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-bg	Color	`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-text	Null	`null`	`null`
Description The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bg	Color	`$gray-500`	`#adb5bd`
Description The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bg	Color	`$primary`	`#0d6efd`
Description The background of the track when the switch is checked.
$kendo-switch-on-track-text	Null	`null`	`null`
Description The text color of the track when the switch is checked.
$kendo-switch-on-track-border	Color	`$kendo-switch-on-track-bg`	`#0d6efd`
Description The border color of the track when the switch is checked.
$kendo-switch-on-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-border	Null	`null`	`null`
Description The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ring	List	`.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-bg	Color	`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-text	Null	`null`	`null`
Description The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bg	Color	`contrast-wcag( $kendo-switch-on-track-bg )`	`white`
Description The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered switch is checked.

Customizing Switch

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community