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-familyStringvar( --kendo-font-family, normal )var(--kendo-font-family, normal)
Description
The font family of the Switch.
$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
$kendo-switch-thumb-border-widthNumber00
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformStringuppercaseuppercase
Description
The text transform of the Switch label.
$kendo-switch-label-displayStringnonenone
Description
The display of the Switch label.
$kendo-switch-sizesMap( sm: ( font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ), md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ), lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px ) )
  • sm: "font-size":"10px","track-width":"36px","track-height":"16px","thumb-width":"10px","thumb-height":"10px","thumb-offset":"3px","label-offset":"4px"
  • md: "font-size":"10px","track-width":"40px","track-height":"20px","thumb-width":"12px","thumb-height":"12px","thumb-offset":"4px","label-offset":"5px"
  • lg: "font-size":"10px","track-width":"44px","track-height":"24px","thumb-width":"14px","thumb-height":"14px","thumb-offset":"5px","label-offset":"6px"
Description
The map with the different Switch sizes.
$kendo-switch-focus-ringList1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))1px solid var(--kendo-color-base-emphasis, #605e5c)
Description
The ring around the focused Switch.
$kendo-switch-off-track-bgStringvar( --kendo-component-bg, transparent )var(--kendo-component-bg, transparent)
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderStringif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))var(--kendo-color-border, #8a8886)
Description
The border color of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bgStringvar( --kendo-component-bg, transparent )var(--kendo-component-bg, transparent)
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-border-alt, #323130)
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bgStringvar( --kendo-component-bg, transparent )var(--kendo-component-bg, transparent)
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-borderStringif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))var(--kendo-color-border, #8a8886)
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bgStringvar( --kendo-component-bg, transparent )var(--kendo-component-bg, transparent)
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bgStringif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))var(--kendo-color-subtle, #605e5c)
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textStringinheritinherit
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderStringif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))var(--kendo-color-border, #8a8886)
Description
The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bgStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-on-app-surface, #323130)
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-textStringinheritinherit
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-border-alt, #323130)
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-disabled-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
The background of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-textStringinheritinherit
Description
The text color of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
The border color of the thumb when the disabled Switch is not checked.
$kendo-switch-on-track-bgStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-borderString$kendo-switch-on-track-bgvar(--kendo-color-primary, #0078d4)
Description
The border color of the track when the Switch is checked.
$kendo-switch-on-track-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))var(--kendo-color-primary-hover, #106ebe)
Description
The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-textStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-borderString$kendo-switch-on-track-hover-bgvar(--kendo-color-primary-hover, #106ebe)
Description
The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bgStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-textStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-borderString$kendo-switch-on-track-focus-bgvar(--kendo-color-primary, #0078d4)
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-textStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-borderColorif($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg)transparent
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textStringinheritinherit
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderStringinheritinherit
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-textStringinheritinherit
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-borderStringinheritinherit
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-disabled-bgStringif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 ))var(--kendo-color-surface, #faf9f8)
Description
The background of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-textStringinheritinherit
Description
The text color of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent)
Description
The border color of the thumb when the disabled Switch is checked.

In this article

Not finding the help you need?