New to Kendo UI for Angular? Start a free 30-day trial

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

2px

2px

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

$kendo-checkbox-bg

null

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.54)

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

null

null

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

null

null

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

null

null

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

null

null

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

$primary

#3f51b5

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

$kendo-radio-checked-text

#3f51b5

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-shadowNull

$kendo-checkbox-focus-shadow

null

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-shadowNull

$kendo-checkbox-focus-checked-shadow

null

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

null

null

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

null

null

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

$kendo-checkbox-disabled-border

#adadad

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

null

null

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

$kendo-radio-disabled-border

#adadad

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

$kendo-radio-disabled-border

#adadad

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 12 12'><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 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")

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

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

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

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
Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-xNumber

0px

0px

Description
Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-yNumber

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

8px

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

$primary

#3f51b5

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

.2

0.2

Description
Opacity of radio button ripple.

In this article

Not finding the help you need?