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

Customizing Checkbox

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber2px2px
Description
The border width of the CheckBox.
$kendo-checkbox-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small CheckBox.
$kendo-checkbox-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium CheckBox.
$kendo-checkbox-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large CheckBox.
$kendo-checkbox-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The glyph size of a large CheckBox.
$kendo-checkbox-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small CheckBox.
$kendo-checkbox-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium CheckBox.
$kendo-checkbox-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large CheckBox.
$kendo-checkbox-bgNullnullnull
Description
The background color of the CheckBox.
$kendo-checkbox-textNullnullnull
Description
The text color of the CheckBox.
$kendo-checkbox-borderColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 54%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ))rgba(0, 0, 0, 0.54)
Description
The border color of the CheckBox.
$kendo-checkbox-hover-bgNullnullnull
Description
The background color of the hovered CheckBox.
$kendo-checkbox-hover-textNullnullnull
Description
The text color of the hovered CheckBox.
$kendo-checkbox-hover-borderNullnullnull
Description
The border color of the hovered CheckBox.
$kendo-checkbox-checked-bgColor$kendo-color-primary#3f51b5
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#3f51b5
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#3f51b5
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#3f51b5
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-borderNullnullnull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadowNullnullnull
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-borderNullnullnull
Description
The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadowNullnullnull
Description
The box shadow of the focused and checked CheckBox.
$kendo-checkbox-disabled-bgNullnullnull
Description
The background color of the disabled CheckBox.
$kendo-checkbox-disabled-textNullnullnull
Description
The text color of the disabled CheckBox.
$kendo-checkbox-disabled-borderColorif($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 ))#adadad
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgColor$kendo-checkbox-disabled-border#adadad
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textColorif($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))black
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderColor$kendo-checkbox-disabled-checked-bg#adadad
Description
The border color of the disabled and checked CheckBox.
$kendo-checkbox-invalid-bgNullnullnull
Description
The background color of an invalid CheckBox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#f31700
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#f31700
Description
The border color of an invalid CheckBox.
$kendo-checkbox-indicator-typeStringimageimage
Description
The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e")
Description
The image for a checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")
Description
The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgColor$kendo-color-primary#3f51b5
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacityNumber.20.2
Description
The opacity of the CheckBox' ripple.

In this article

Not finding the help you need?