Customizing Radio

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-radio-radius	Number	`50%`	`50%`
Description Border radius of radio button.
$kendo-radio-border-width	Number	`2px`	`2px`
Description Border width of radio button.
$kendo-radio-bg	Null	`$kendo-checkbox-bg`	`null`
Description Background color of radio button.
$kendo-radio-text	Null	`$kendo-checkbox-text`	`null`
Description Color of radio button.
$kendo-radio-border	Color	`$kendo-checkbox-border`	`rgba(0, 0, 0, 0.54)`
Description Border color of radio button.
$kendo-radio-hover-bg	Null	`null`	`null`
Description Background color of hovered radio button.
$kendo-radio-hover-text	Null	`null`	`null`
Description Color of hovered radio button.
$kendo-radio-hover-border	Null	`null`	`null`
Description Border color of hovered radio button.
$kendo-radio-checked-bg	Null	`null`	`null`
Description Background color of checked radio button.
$kendo-radio-checked-text	Color	`$primary`	`#3f51b5`
Description Color of checked radio button.
$kendo-radio-checked-border	Color	`$kendo-radio-checked-text`	`#3f51b5`
Description Border color of checked radio button.
$kendo-radio-focus-border	Null	`$kendo-checkbox-focus-border`	`null`
Description Border color of focused radio button.
$kendo-radio-focus-shadow	Null	`$kendo-checkbox-focus-shadow`	`null`
Description Box shadow of focused radio button.
$kendo-radio-focus-checked-border	Null	`$kendo-checkbox-focus-checked-border`	`null`
Description Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadow	Null	`$kendo-checkbox-focus-checked-shadow`	`null`
Description Box shadow of focused and checked radio button.
$kendo-radio-disabled-bg	Null	`null`	`null`
Description Background color of disabled radio button.
$kendo-radio-disabled-text	Null	`null`	`null`
Description Color of disabled radio button.
$kendo-radio-disabled-border	Color	`$kendo-checkbox-disabled-border`	`#adadad`
Description Border color of disabled radio button.
$kendo-radio-disabled-checked-bg	Null	`null`	`null`
Description Background color of disabled and checked radio button.
$kendo-radio-disabled-checked-text	Color	`$kendo-radio-disabled-border`	`#adadad`
Description Color of disabled and checked radio button.
$kendo-radio-disabled-checked-border	Color	`$kendo-radio-disabled-border`	`#adadad`
Description Border color of disabled and checked radio button.
$kendo-radio-invalid-bg	Null	`$kendo-checkbox-invalid-bg`	`null`
Description Background color of invalid radio button.
$kendo-radio-invalid-text	Color	`$kendo-checkbox-invalid-text`	`#f31700`
Description Color of invalid radio button.
$kendo-radio-invalid-border	Color	`$kendo-checkbox-invalid-border`	`#f31700`
Description Border color of invalid radio button.
$kendo-radio-indicator-type	String	`image`	`image`
Description Type of radio button indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of radio button indicator.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description Glyph of radio button indicator.
$kendo-radio-checked-image	String	`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-image	String	`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-x	Number	`map-get( $spacing, 1 )`	`4px`
Description The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacing	Number	`map-get( $spacing, 4 )`	`16px`
Description Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-x	Number	`0px`	`0px`
Description Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-y	Number	`$kendo-list-item-padding-y-md`	`8px`
Description Vertical padding of radio button list items.
$kendo-radio-ripple-bg	Color	`$primary`	`#3f51b5`
Description Background color of radio button ripple.
$kendo-radio-ripple-opacity	Number	`.2`	`0.2`
Description Opacity of radio button ripple.

Customizing Radio

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