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

$component-border

rgba(0, 0, 0, 0.08)

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

#ff6358

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

contrast-wcag( $kendo-checkbox-checked-bg )

white

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

$kendo-checkbox-checked-bg

#ff6358

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

$kendo-checkbox-bg

#ffffff

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

$kendo-checkbox-checked-bg

#ff6358

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

$kendo-checkbox-border

rgba(0, 0, 0, 0.08)

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

null

null

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

0 0 0 2px rgba(0, 0, 0, .06)

0 0 0 2px rgba(0, 0, 0, 0.06)

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

null

null

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

0 0 0 2px rgba( $primary, .3 )

0 0 0 2px rgba(255, 99, 88, 0.3)

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
Border color of disabled and checked checkbox.
$kendo-checkbox-invalid-bgNull

null

null

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

$invalid-text

#f31700

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

$invalid-border

#f31700

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 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%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 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")

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

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 4 )

16px

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

4px

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

$kendo-checkbox-checked-bg

#ff6358

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?