Style and appearance in React Check box component

2 Mar 20261 minute to read

Customize the CheckBox appearance by overriding its default CSS styles. The following table lists the CSS classes available for CheckBox styling:

CSS Class	Purpose
.e-checkbox-wrapper .e-frame	Styles the checkbox frame
.e-checkbox-wrapper:hover .e-frame	Styles the checkbox frame on hover state
.e-checkbox-wrapper .e-label	Styles the checkbox label
.e-checkbox-wrapper:hover .e-label	Styles the checkbox label on hover state
.e-checkbox-wrapper .e-frame.e-check	Styles the checked checkbox frame
.e-checkbox-wrapper:hover .e-frame.e-check	Styles the checked checkbox frame on hover state
.e-checkbox-wrapper .e-frame.e-indeterminate	Styles the indeterminate checkbox frame
.e-checkbox-wrapper.e-disabled .e-frame	Styles the disabled checkbox frame
.e-checkbox-wrapper .e-ripple	Styles the ripple effect on checkbox

Create custom themes for the CheckBox component using the Theme Studio. Define custom CSS according to your requirements and apply it to the CheckBox elements.