Style and appearance in React Radio Button

4 Sep 20262 minutes to read

Customize the React Radio Button’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 React Radio Button component
.e-radio	Input element for the React Radio Button
.e-radio + label	Label text associated with the React Radio Button
.e-radio + label::before	React Radio Button indicator circle styling
.e-radio + label::after	Inner circle styling when React Radio Button is checked
.e-radio:hover + label::before	React Radio Button indicator on mouse hover
.e-radio:checked + label::before	React Radio Button indicator styling when checked
.e-radio:checked + label::after	Inner circle styling when checked
.e-radio:focus + label::before	React Radio Button indicator styling when focused via keyboard
.e-radio:disabled + label	Label styling when React Radio Button is disabled
.e-radio:disabled + label::before	React Radio Button indicator styling when disabled
.e-small	Applies small size variant to the React Radio Button