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-radiusNullnullnull
Description
Border radius of checkbox
$kendo-checkbox-border-widthNumber1px1px
Description
Border width of checkbox.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
Background color of checkbox.
$kendo-checkbox-textNullnullnull
Description
Color of checkbox.
$kendo-checkbox-borderColor$kendo-component-border#ededed
Description
Border color of checkbox.
$kendo-checkbox-hover-bgNullnullnull
Description
Background color of hovered checkbox.
$kendo-checkbox-hover-textNullnullnull
Description
Color of hovered checkbox.
$kendo-checkbox-hover-borderNullnullnull
Description
Border color of hovered checkbox.
$kendo-checkbox-focus-borderNullnullnull
Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadowNullnullnull
Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-outlineNullnullnull
Description
The outline of a focused checkbox.
$kendo-checkbox-checked-bgColor$kendo-color-primary#622331
Description
Background color of checked checkbox.
$kendo-checkbox-checked-textColork-contrast-color( $kendo-checkbox-checked-bg )white
Description
Color of checked checkbox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#622331
Description
Border color of checked checkbox.
$kendo-checkbox-hover-checked-bgNullnullnull
Description
Background of hovered and checked checkbox.
$kendo-checkbox-hover-checked-textNullnullnull
Description
Color of checked checkbox.
$kendo-checkbox-hover-checked-borderNullnullnull
Description
Border of hovered and checked checkbox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#622331
Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#622331
Description
Border color of indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-bgNullnullnull
Description
Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-textNullnullnull
Description
Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-borderNullnullnull
Description
Border color of hovered and indeterminate checkbox.
$kendo-checkbox-disabled-bgNullnullnull
Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-textNullnullnull
Description
Color of disabled checkbox.
$kendo-checkbox-disabled-borderNullnullnull
Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bgNullnullnull
Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-textNullnullnull
Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-borderNullnullnull
Description
Border color of disabled and checked checkbox.
$kendo-checkbox-disabled-indeterminate-bgNullnullnull
Description
Background color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-textNullnullnull
Description
Border color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-borderNullnullnull
Description
Border color of disabled and indeterminate checkbox.
$kendo-checkbox-invalid-bgColor$kendo-checkbox-bg#ffffff
Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#cf222e
Description
Color of invalid checkbox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#cf222e
Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-typeStringglyphglyph
Description
Type of checkbox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
Glyph of indeterminate checkbox indicator.
$kendo-checkbox-imageNullnullnull
Description
Image of checkbox indicator.
$kendo-checkbox-hover-imageNullnullnull
Description
Image of hovered checkbox indicator.
$kendo-checkbox-checked-imageNullnullnull
Description
Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-imageNullnullnull
Description
Image of indeterminate checkbox indicator.
$kendo-checkbox-hover-checked-imageNullnullnull
Description
Image of hovered and checked checkbox indicator.
$kendo-checkbox-hover-indeterminate-imageNullnullnull
Description
Image of hovered and indeterminate checkbox indicator.
$kendo-checkbox-disabled-checked-imageNullnullnull
Description
Image of checked checkbox indicator.
$kendo-checkbox-disabled-indeterminate-imageNullnullnull
Description
Image of indeterminate checkbox indicator.
$kendo-checkbox-list-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-xNullnullnull
Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-yNullnullnull
Description
Vertical padding of checkbox list items.
$kendo-checkbox-list-item-spacingNullnullnull
Description
Spacing between checkbox and text.
$kendo-checkbox-ripple-bgColor$kendo-color-primary#622331
Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacityNumber.250.25
Description
Opacity of checkbox ripple.

In this article

Not finding the help you need?