Customizing Checkbox

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber

1px

1px

Description
Border width of checkbox.
$kendo-checkbox-bgColor

$component-bg

#ffffff

Description
Background color of checkbox.
$kendo-checkbox-textNull

null

null

Description
Color of checkbox.
$kendo-checkbox-borderColor

if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )

#ced4da

Description
Border color of checkbox.
$kendo-checkbox-hover-bgNull

null

null

Description
Background color of hovered checkbox.
$kendo-checkbox-hover-textNull

null

null

Description
Color of hovered checkbox.
$kendo-checkbox-hover-borderNull

null

null

Description
Border color of hovered checkbox.
$kendo-checkbox-checked-bgColor

$primary

#0d6efd

Description
Background color of checked checkbox.
$kendo-checkbox-checked-textColor

k-contrast-color( $kendo-checkbox-checked-bg )

white

Description
Color of checked checkbox.
$kendo-checkbox-checked-borderColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Border color of checked checkbox.
$kendo-checkbox-indeterminate-bgColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-textColor

$kendo-checkbox-checked-text

white

Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-borderColor

$kendo-checkbox-checked-border

#0d6efd

Description
Border color of indeterminate checkbox.
$kendo-checkbox-focus-borderColor

k-try-tint( $primary, 50% )

#86b7fe

Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadowList

0 0 0 .25rem rgba( $primary, .25 )

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-borderColor

$kendo-checkbox-checked-border

#0d6efd

Description
Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadowList

$kendo-checkbox-focus-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bgNull

null

null

Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-textNull

null

null

Description
Color of disabled checkbox.
$kendo-checkbox-disabled-borderNull

null

null

Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bgNull

null

null

Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-textNull

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-borderNull

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-invalid-bgNull

null

null

Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-textColor

$invalid-text

#dc3545

Description
Color of invalid checkbox.
$kendo-checkbox-invalid-borderColor

$invalid-border

#dc3545

Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-typeString

image

image

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-checked-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") )

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-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")

Description
Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") )

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-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")

Description
Image of checked checkbox indicator.
$kendo-checkbox-label-margin-xNumber

k-map-get( $spacing, 1 )

0.25rem

Description
The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacingNumber

k-map-get( $spacing, 4 )

1rem

Description
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-xNumber

0px

0px

Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-yNumber

$kendo-list-item-padding-y-md

0.25rem

Description
Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bgColor

$kendo-checkbox-checked-bg

#0d6efd

Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacityNumber

.25

0.25

Description
Opacity of checkbox ripple.

In this article

Not finding the help you need?