Style and appearance in React Radio button component

2 Mar 20262 minutes to read

Customize the RadioButton’s appearance by overriding default CSS classes. Create your own custom theme using our Theme Studio or apply targeted CSS rules to individual components.

CSS Class	Purpose of Class
	.e-radio-wrapper	Container wrapper for the RadioButton component
	.e-radio	Input element for the RadioButton
	.e-radio + label	Label text associated with the RadioButton
	.e-radio + label::before	RadioButton indicator circle styling
	.e-radio + label::after	Inner circle styling when RadioButton is checked
	.e-radio:hover + label::before	RadioButton indicator on mouse hover
	.e-radio:checked + label::before	RadioButton indicator styling when checked
	.e-radio:checked + label::after	Inner circle styling when checked
	.e-radio:focus + label::before	RadioButton indicator styling when focused via keyboard
	.e-radio:disabled + label	Label styling when RadioButton is disabled
	.e-radio:disabled + label::before	RadioButton indicator styling when disabled
	.e-small	Applies small size variant to the RadioButton