New to Kendo UI for Angular? Start a free 30-day trial
Customizing Checkbox
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-checkbox-border-width | Number | 2px | 2px |
Description
The border width of the CheckBox. | |||
| $kendo-checkbox-sm-size | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The size of a small CheckBox. | |||
| $kendo-checkbox-md-size | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The size of a medium CheckBox. | |||
| $kendo-checkbox-lg-size | Number | k-map-get( $kendo-spacing, 5 ) | 20px |
Description
The size of a large CheckBox. | |||
| $kendo-checkbox-sm-glyph-size | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The glyph size of a small CheckBox. | |||
| $kendo-checkbox-md-glyph-size | Number | k-map-get( $kendo-spacing, 3.5 ) | 14px |
Description
The glyph size of a medium CheckBox. | |||
| $kendo-checkbox-lg-glyph-size | Number | k-map-get( $kendo-spacing, 4.5 ) | 18px |
Description
The glyph size of a large CheckBox. | |||
| $kendo-checkbox-sm-ripple-size | Number | 300% | 300% |
Description
The ripple size of a small CheckBox. | |||
| $kendo-checkbox-md-ripple-size | Number | 300% | 300% |
Description
The ripple size of a medium CheckBox. | |||
| $kendo-checkbox-lg-ripple-size | Number | 300% | 300% |
Description
The ripple size of a large CheckBox. | |||
| $kendo-checkbox-bg | Null | null | null |
Description
The background color of the CheckBox. | |||
| $kendo-checkbox-text | Null | null | null |
Description
The text color of the CheckBox. | |||
| $kendo-checkbox-border | Color | 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-bg | Null | null | null |
Description
The background color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-text | Null | null | null |
Description
The text color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-border | Null | null | null |
Description
The border color of the hovered CheckBox. | |||
| $kendo-checkbox-checked-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the checked CheckBox. | |||
| $kendo-checkbox-checked-text | Color | k-contrast-color( $kendo-checkbox-checked-bg ) | white |
Description
The text color of the checked CheckBox. | |||
| $kendo-checkbox-checked-border | Color | $kendo-checkbox-checked-bg | #3f51b5 |
Description
The border color of the checked CheckBox. | |||
| $kendo-checkbox-indeterminate-bg | Color | $kendo-checkbox-checked-bg | #3f51b5 |
Description
The background color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-text | Color | $kendo-checkbox-checked-text | white |
Description
The text color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-border | Color | $kendo-checkbox-checked-border | #3f51b5 |
Description
The border color of the indeterminate CheckBox. | |||
| $kendo-checkbox-focus-border | Null | null | null |
Description
The border color of the focused CheckBox. | |||
| $kendo-checkbox-focus-shadow | Null | null | null |
Description
The box shadow of the focused CheckBox. | |||
| $kendo-checkbox-focus-checked-border | Null | null | null |
Description
The border color of the focused and checked CheckBox. | |||
| $kendo-checkbox-focus-checked-shadow | Null | null | null |
Description
The box shadow of the focused and checked CheckBox. | |||
| $kendo-checkbox-disabled-bg | Null | null | null |
Description
The background color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-text | Null | null | null |
Description
The text color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-border | Color | k-try-shade( $kendo-component-bg, 4 ) | #adadad |
Description
The border color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-checked-bg | Color | $kendo-checkbox-disabled-border | #adadad |
Description
The background color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-text | Color | k-contrast-color( $kendo-checkbox-disabled-checked-bg ) | black |
Description
The text color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-border | Color | $kendo-checkbox-disabled-checked-bg | #adadad |
Description
The border color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-invalid-bg | Null | null | null |
Description
The background color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-text | Color | $kendo-invalid-text | #f31700 |
Description
The text color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-border | Color | $kendo-invalid-border | #f31700 |
Description
The border color of an invalid CheckBox. | |||
| $kendo-checkbox-indicator-type | String | image | image |
Description
The type of the CheckBox indicator. | |||
| $kendo-checkbox-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The font family of the CheckBox indicator glyph. | |||
| $kendo-checkbox-checked-glyph | String | "\e118" | "\e118" |
Description
The glyph of the CheckBox indicator. | |||
| $kendo-checkbox-indeterminate-glyph | String | "\e121" | "\e121" |
Description
The glyph of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-checked-image | String | k-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-image | String | k-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-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal margin of the CheckBox inside a label. | |||
| $kendo-checkbox-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The spacing between the items in a horizontal CheckBox list. | |||
| $kendo-checkbox-list-item-padding-x | Number | 0px | 0px |
Description
The horizontal padding of the CheckBox list items. | |||
| $kendo-checkbox-list-item-padding-y | Number | $kendo-list-md-item-padding-y | 8px |
Description
The vertical padding of the CheckBox list items. | |||
| $kendo-checkbox-ripple-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the CheckBox' ripple. | |||
| $kendo-checkbox-ripple-opacity | Number | .2 | 0.2 |
Description
The opacity of the CheckBox' ripple. | |||
