Customizing Switch

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	null	null
Description The font family of the Switch.
$kendo-switch-track-border-width	Number	1px	1px
Description The border width of the Switch track.
$kendo-switch-thumb-border-width	Number	1px	1px
Description The border width of the Switch thumb.
$kendo-switch-label-text-transform	String	uppercase	uppercase
Description The text transform of the Switch label.
$kendo-switch-label-display	String	inline	inline
Description The display of the Switch label.
$kendo-switch-sizes	Map	( 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-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	String	if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
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	Null	null	null
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	2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))	2px solid color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bg	Null	null	null
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	String	$kendo-base-bg	var(--kendo-color-surface, #fafafa)
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	String	$kendo-base-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	String	$kendo-base-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
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	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	String	if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))	var(--kendo-color-on-primary, #ffffff)
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	String	$kendo-switch-on-track-bg	var(--kendo-color-primary, #ff6358)
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	2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 ))	2px solid color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bg	Null	null	null
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	String	$kendo-base-bg	var(--kendo-color-surface, #fafafa)
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	String	$kendo-base-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	String	$kendo-base-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
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.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components