Customizing Radio

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
Description
The border radius of the RadioButton.
$kendo-radio-border-widthNumber1px1px
Description
The border width of the RadioButton.
$kendo-radio-sm-sizeStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The size of a small RadioButton.
$kendo-radio-md-sizeStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The size of a medium RadioButton.
$kendo-radio-lg-sizeStringk-spacing(5)var(--kendo-spacing-5, 1.25rem)
Description
The size of a large RadioButton.
$kendo-radio-sm-glyph-sizeStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The glyph size of a small RadioButton.
$kendo-radio-md-glyph-sizeStringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-sizeStringk-spacing(4.5)var(--kendo-spacing-4\.5, 1.125rem)
Description
The glyph size of a large RadioButton.
$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small RadioButton.
$kendo-radio-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium RadioButton.
$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large RadioButton.
$kendo-radio-sizesMap( sm: ( size: $kendo-radio-sm-size, glyph-size: $kendo-radio-sm-glyph-size, ripple-size: $kendo-radio-sm-ripple-size ), md: ( size: $kendo-radio-md-size, glyph-size: $kendo-radio-md-glyph-size, ripple-size: $kendo-radio-md-ripple-size ), lg: ( size: $kendo-radio-lg-size, glyph-size: $kendo-radio-lg-glyph-size, ripple-size: $kendo-radio-lg-ripple-size ) )(sm: (size: var(--kendo-spacing-3, 0.75rem), glyph-size: var(--kendo-spacing-2\.5, 0.625rem), ripple-size: 300%), md: (size: var(--kendo-spacing-4, 1rem), glyph-size: var(--kendo-spacing-3\.5, 0.875rem), ripple-size: 300%), lg: (size: var(--kendo-spacing-5, 1.25rem), glyph-size: var(--kendo-spacing-4\.5, 1.125rem), ripple-size: 300%))
Description
The map with the different RadioButton sizes.
$kendo-radio-bgString$kendo-checkbox-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the RadioButton.
$kendo-radio-textNull$kendo-checkbox-textnull
Description
The text color of radio button.
$kendo-radio-borderString$kendo-checkbox-bordervar(--kendo-color-border-alt, #ced4da)
Description
The border color of the RadioButton.
$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull
Description
The background color of the hovered RadioButton.
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull
Description
The text color of the hovered RadioButton.
$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull
Description
The border color of the hovered RadioButton.
$kendo-radio-checked-bgString$kendo-checkbox-checked-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the checked RadioButton.
$kendo-radio-checked-textString$kendo-checkbox-checked-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the checked RadioButton.
$kendo-radio-checked-borderString$kendo-checkbox-checked-bordervar(--kendo-color-primary, #0d6efd)
Description
The border color of the checked RadioButton.
$kendo-radio-focus-borderString$kendo-checkbox-focus-bordervar(--kendo-color-primary-emphasis, #6ea8fe)
Description
The border color of the focused RadioButton.
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-borderString$kendo-checkbox-focus-checked-bordervar(--kendo-color-primary, #0d6efd)
Description
The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull
Description
The background color of the disabled RadioButton.
$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull
Description
The color of the disabled RadioButton.
$kendo-radio-disabled-borderNull$kendo-checkbox-disabled-bordernull
Description
The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull
Description
The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull
Description
The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull
Description
The border color of disabled and checked RadioButton.
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The background color of the invalid RadioButton.
$kendo-radio-invalid-textString$kendo-checkbox-invalid-textvar(--kendo-color-error, #dc3545)
Description
The text color of the invalid RadioButton.
$kendo-radio-invalid-borderString$kendo-checkbox-invalid-bordervar(--kendo-color-error, #dc3545)
Description
The border color of the invalid RadioButton.
$kendo-radio-indicator-typeStringimageimage
Description
The type of the RadioButton indicator.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the RadioButton indicator glyph.
$kendo-radio-checked-glyphString"\e308""\e308"
Description
The glyph of the RadioButton indicator.
$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='var%28--kendo-color-on-primary, %23ffffff%29'/%3e%3c/svg%3e")
Description
The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-imageNullnullnull
Description
The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-margin-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-yString$kendo-list-md-item-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bgString$kendo-radio-checked-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the RadioButton ripple.
$kendo-radio-ripple-opacityNumber.250.25
Description
The opacity of the RadioButton ripple.

In this article

Not finding the help you need?