Customizing Checkbox

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-checkbox-border-radiusnull
Description
The border radius of the CheckBox.
$kendo-checkbox-border-width1px
Description
The border width of the CheckBox.
$kendo-checkbox-bg$kendo-component-bg
Description
The background color of the CheckBox.
$kendo-checkbox-texttransparent
Description
The text color of the CheckBox.
$kendo-checkbox-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the CheckBox.
$kendo-checkbox-hover-bg$kendo-checkbox-bg
Description
The background color of the hovered CheckBox.
$kendo-checkbox-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 ))
Description
The text color of the hovered CheckBox.
$kendo-checkbox-hover-border$kendo-checkbox-border
Description
The border color of the hovered CheckBox.
$kendo-checkbox-checked-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-border$kendo-checkbox-checked-bg
Description
The border color of the checked CheckBox.
$kendo-checkbox-hover-checked-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-border$kendo-checkbox-hover-checked-bg
Description
The border color of the hovered and checked CheckBox.
$kendo-checkbox-focus-bordernull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadownull
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-outline1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The outline of the focused CheckBox.
$kendo-checkbox-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 ))
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 ))
Description
The text color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-borderif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The border color of the hovered and indeterminate CheckBox.
$kendo-checkbox-disabled-bg$kendo-checkbox-bg
Description
The background color of the disabled CheckBox.
$kendo-checkbox-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The text color of the disabled CheckBox.
$kendo-checkbox-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderif($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 ))
Description
The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-invalid-bg$kendo-checkbox-bg
Description
The background color of an invalid CheckBox.
$kendo-checkbox-invalid-text$kendo-invalid-text
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border$kendo-invalid-border
Description
The border color of an invalid CheckBox.
$kendo-checkbox-indicator-typeimage
Description
The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-family"WebComponentsIcons", monospace
Description
The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyph"\e118"
Description
The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyph"\e121"
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered CheckBox indicator.
$kendo-checkbox-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered and checked CheckBox indicator.
$kendo-checkbox-hover-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered and indeterminate CheckBox indicator.
$kendo-checkbox-disabled-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the checked CheckBox indicator.
$kendo-checkbox-disabled-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xmap.get( $kendo-spacing, 2 )
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingmap.get( $kendo-spacing, 4 )
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x0px
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y$kendo-list-md-item-padding-y
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity.25
Description
The opacity of the CheckBox' ripple.

In this article

Not finding the help you need?