Customizing Checkbox

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-checkbox-border-width	Number	`2px`	`2px`
Description Border width of checkbox.
$kendo-checkbox-bg	Null	`null`	`null`
Description Background color of checkbox.
$kendo-checkbox-text	Null	`null`	`null`
Description Color of checkbox.
$kendo-checkbox-border	Color	`rgba( if( $dark-theme, $white, $black ), .54 )`	`rgba(0, 0, 0, 0.54)`
Description Border color of checkbox.
$kendo-checkbox-hover-bg	Null	`null`	`null`
Description Background color of hovered checkbox.
$kendo-checkbox-hover-text	Null	`null`	`null`
Description Color of hovered checkbox.
$kendo-checkbox-hover-border	Null	`null`	`null`
Description Border color of hovered checkbox.
$kendo-checkbox-checked-bg	Color	`$primary`	`#3f51b5`
Description Background color of checked checkbox.
$kendo-checkbox-checked-text	Color	`contrast-wcag( $kendo-checkbox-checked-bg )`	`white`
Description Color of checked checkbox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#3f51b5`
Description Border color of checked checkbox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-checked-bg`	`#3f51b5`
Description Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-text`	`white`
Description Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-checked-border`	`#3f51b5`
Description Border color of indeterminate checkbox.
$kendo-checkbox-focus-border	Null	`null`	`null`
Description Border color of focused checkbox.
$kendo-checkbox-focus-shadow	Null	`null`	`null`
Description Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-border	Null	`null`	`null`
Description Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadow	Null	`null`	`null`
Description Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bg	Null	`null`	`null`
Description Background color of disabled checkbox.
$kendo-checkbox-disabled-text	Null	`null`	`null`
Description Color of disabled checkbox.
$kendo-checkbox-disabled-border	Color	`try-shade( $component-bg, 4 )`	`#adadad`
Description Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bg	Color	`$kendo-checkbox-disabled-border`	`#adadad`
Description Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-text	Color	`contrast-wcag( $kendo-checkbox-disabled-checked-bg )`	`white`
Description Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-border	Color	`$kendo-checkbox-disabled-checked-bg`	`#adadad`
Description Border color of disabled and checked checkbox.
$kendo-checkbox-invalid-bg	Null	`null`	`null`
Description Background color of invalid checkbox.
$kendo-checkbox-invalid-text	Color	`$invalid-text`	`#f31700`
Description Color of invalid checkbox.
$kendo-checkbox-invalid-border	Color	`$invalid-border`	`#f31700`
Description Border color of invalid checkbox.
$kendo-checkbox-indicator-type	String	`image`	`image`
Description Type of checkbox indicator.
$kendo-checkbox-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyph	String	`"\e118"`	`"\e118"`
Description Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyph	String	`"\e121"`	`"\e121"`
Description Glyph of indeterminate checkbox indicator.
$kendo-checkbox-checked-image	String	`escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") )`	`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 Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-image	String	`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-width='3' d='M4 10h12'/></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-width='3' d='M4 10h12'/%3e%3c/svg%3e")`
Description Image of checked checkbox indicator.
$kendo-checkbox-label-margin-x	Number	`map-get( $spacing, 1 )`	`4px`
Description The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacing	Number	`map-get( $spacing, 4 )`	`16px`
Description Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-x	Number	`0px`	`0px`
Description Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-y	Number	`$kendo-list-item-padding-y-md`	`8px`
Description Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bg	Color	`$primary`	`#3f51b5`
Description Background color of checkbox ripple.
$kendo-checkbox-ripple-opacity	Number	`.2`	`0.2`
Description Opacity of checkbox ripple.

Customizing Checkbox

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community