Customizing Radio

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber

50%

50%

Description
Border radius of radio button.
$kendo-radio-border-widthNumber

1px

1px

Description
Border width of radio button.
$kendo-radio-bgColor

$kendo-checkbox-bg

#ffffff

Description
Background color of radio button.
$kendo-radio-textNull

$kendo-checkbox-text

null

Description
Color of radio button.
$kendo-radio-borderColor

$kendo-checkbox-border

rgba(0, 0, 0, 0.08)

Description
Border color of radio button.
$kendo-radio-hover-bgNull

$kendo-checkbox-hover-bg

null

Description
Background color of hovered radio button.
$kendo-radio-hover-textNull

$kendo-checkbox-hover-text

null

Description
Color of hovered radio button.
$kendo-radio-hover-borderNull

$kendo-checkbox-hover-border

null

Description
Border color of hovered radio button.
$kendo-radio-checked-bgColor

$kendo-checkbox-checked-bg

#ff6358

Description
Background color of checked radio button.
$kendo-radio-checked-textColor

$kendo-checkbox-checked-text

white

Description
Color of checked radio button.
$kendo-radio-checked-borderColor

$kendo-checkbox-checked-border

#ff6358

Description
Border color of checked radio button.
$kendo-radio-focus-borderNull

$kendo-checkbox-focus-border

null

Description
Border color of focused radio button.
$kendo-radio-focus-shadowList

$kendo-checkbox-focus-shadow

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

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

$kendo-checkbox-focus-checked-border

null

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

$kendo-checkbox-focus-checked-shadow

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

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

$kendo-checkbox-disabled-bg

null

Description
Background color of disabled radio button.
$kendo-radio-disabled-textNull

$kendo-checkbox-disabled-text

null

Description
Color of disabled radio button.
$kendo-radio-disabled-borderNull

$kendo-checkbox-disabled-border

null

Description
Border color of disabled radio button.
$kendo-radio-disabled-checked-bgNull

$kendo-checkbox-disabled-checked-bg

null

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

$kendo-checkbox-disabled-checked-text

null

Description
Color of disabled and checked radio button.
$kendo-radio-disabled-checked-borderNull

$kendo-checkbox-disabled-checked-border

null

Description
Border color of disabled and checked radio button.
$kendo-radio-invalid-bgNull

$kendo-checkbox-invalid-bg

null

Description
Background color of invalid radio button.
$kendo-radio-invalid-textColor

$kendo-checkbox-invalid-text

#f31700

Description
Color of invalid radio button.
$kendo-radio-invalid-borderColor

$kendo-checkbox-invalid-border

#f31700

Description
Border color of invalid radio button.
$kendo-radio-indicator-typeString

image

image

Description
Type of radio button indicator.
$kendo-radio-glyph-font-familyList

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

Description
Glyph font family of radio button indicator.
$kendo-radio-checked-glyphString

"\e308"

"\e308"

Description
Glyph of radio button indicator.
$kendo-radio-checked-imageString

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")

Description
Image of checked radio button indicator.
$kendo-radio-disabled-checked-imageNull

null

null

Description
Image of disabled and checked radio button indicator.
$kendo-radio-label-margin-xNumber

map-get( $spacing, 1 )

4px

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

map-get( $spacing, 4 )

16px

Description
The horizontal list item margin of radio button.
$kendo-radio-list-item-padding-xNumber

0px

0px

Description
The horizontal list item padding of radio button.
$kendo-radio-list-item-padding-yNumber

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

4px

Description
The vertical list item padding of radio button.
$kendo-radio-ripple-bgColor

$kendo-radio-checked-bg

#ff6358

Description
Background color of radio button ripple.
$kendo-radio-ripple-opacityNumber

.25

0.25

Description
Opacity of radio button ripple.

In this article

Not finding the help you need?