You can customize the appearance of the CheckBox component using the CSS rules.
Define own CSS rules according to your requirement and assign the class name to the cssClass
property.
The background and border color of the CheckBox is customized through custom classes to create primary, success, warning, danger, and info type of checkbox.
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize CheckBox appearance.
class App extends React.Component {
render() {
return (<ul>
<li><CheckBoxComponent label="Primary" cssClass="e-primary" checked={true}/></li>
<li><CheckBoxComponent label="Success" cssClass="e-success" checked={true}/></li>
<li><CheckBoxComponent label="Info" cssClass="e-info" checked={true}/></li>
<li><CheckBoxComponent label="Warning" cssClass="e-warning" checked={true}/></li>
<li><CheckBoxComponent label="Danger" cssClass="e-danger" checked={true}/></li>
</ul>);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='check-box'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-checkbox-wrapper {
margin-top: 18px;
}
.e-checkbox-wrapper.e-primary:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #e03872;
}
.e-checkbox-wrapper.e-success .e-frame.e-check,
.e-checkbox-wrapper.e-success .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #689f38;
}
.e-checkbox-wrapper.e-success:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #449d44;
}
.e-checkbox-wrapper.e-info .e-frame.e-check,
.e-checkbox-wrapper.e-info .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #2196f3;
}
.e-checkbox-wrapper.e-info:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #0b7dda;
}
.e-checkbox-wrapper.e-warning .e-frame.e-check,
.e-checkbox-wrapper.e-warning .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #ef6c00;
}
.e-checkbox-wrapper.e-warning:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #cc5c00;
}
.e-checkbox-wrapper.e-danger .e-frame.e-check,
.e-checkbox-wrapper.e-danger .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #d84315;
}
.e-checkbox-wrapper.e-danger:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
background-color: #ba3912;
}
li {
list-style: none;
margin: 25px auto;
}
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize CheckBox appearance.
class App extends React.Component<{}, {}> {
public render() {
return (
<ul>
{/* Refer the 'e-primary' class details in 'style.css'.*/}
<li><CheckBoxComponent label="Primary" cssClass="e-primary" checked={true} /></li>
{/* Refer the 'e-success' class details in 'style.css'.*/}
<li><CheckBoxComponent label="Success" cssClass="e-success" checked={true} /></li>
{/* Refer the 'e-info' class details in 'style.css'.*/}
<li><CheckBoxComponent label="Info" cssClass="e-info" checked={true} /></li>
{/* Refer the 'e-warning' class details in 'style.css'.*/}
<li><CheckBoxComponent label="Warning" cssClass="e-warning" checked={true} /></li>
{/* Refer the 'e-danger' class details in 'style.css'.*/}
<li><CheckBoxComponent label="Danger" cssClass="e-danger" checked={true} /></li>
</ul>
);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));
CheckBox frame can be customized as per the requirement by adding CSS rules.
In the following example, to-do list is displayed with round checkbox by changing
border-radius
as 100%
by adding e-custom
class.
import { enableRipple } from '@syncfusion/ej2-base';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To customize CheckBox appearance.
class App extends React.Component {
render() {
return (<ul>
<li><CheckBoxComponent label="Buy Groceries" cssClass="e-custom" checked={true}/></li>
<li><CheckBoxComponent label="Pay Rent" cssClass="e-custom"/></li>
<li><CheckBoxComponent label="Make Dinner" cssClass="e-custom"/></li>
<li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-custom"/></li>
</ul>);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='check-box'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
li {
list-style: none;
margin: 25px auto;
}
.e-custom .e-frame {
border-radius: 100%;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
content: '\e703';
}
.e-checkicon.e-checkbox-wrapper .e-check {
font-size: 8px;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
background-color: white;
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
background-color: white;
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
background-color: white;
border-color: grey;
box-shadow: none;
color: grey;
}
import { enableRipple } from '@syncfusion/ej2-base';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To customize CheckBox appearance.
class App extends React.Component<{}, {}> {
public render() {
return (
<ul>
<li><CheckBoxComponent label="Buy Groceries" cssClass="e-custom" checked={true} /></li>
<li><CheckBoxComponent label="Pay Rent" cssClass="e-custom" /></li>
<li><CheckBoxComponent label="Make Dinner" cssClass="e-custom" /></li>
<li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-custom" /></li>
</ul>
);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));
CheckBox check icon can be customized as per the requirement by adding CSS rules.
In the following example, the check icon can be customized by changing check icon content, background and
border color in focus and hovered states by adding e-checkicon
class.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To customize CheckBox appearance.
class App extends React.Component {
render() {
return (<ul>
<li><CheckBoxComponent label="Buy Groceries" cssClass="e-checkicon" checked={true}/></li>
<li><CheckBoxComponent label="Pay Rent" cssClass="e-checkicon"/></li>
<li><CheckBoxComponent label="Make Dinner" cssClass="e-checkicon"/></li>
<li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-checkicon"/></li>
</ul>);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='check-box'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
li {
list-style: none;
margin: 25px auto;
}
.e-custom .e-frame {
border-radius: 100%;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
content: '\e703';
}
.e-checkicon.e-checkbox-wrapper .e-check {
font-size: 8px;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
background-color: white;
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
background-color: white;
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
background-color: white;
border-color: grey;
box-shadow: none;
color: grey;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To customize CheckBox appearance.
class App extends React.Component<{}, {}> {
render() {
return (
<ul>
<li><CheckBoxComponent label="Buy Groceries" cssClass="e-checkicon" checked={true} /></li>
<li><CheckBoxComponent label="Pay Rent" cssClass="e-checkicon" /></li>
<li><CheckBoxComponent label="Make Dinner" cssClass="e-checkicon" /></li>
<li><CheckBoxComponent label="Finish To-do List Article" cssClass="e-checkicon" /></li>
</ul>
);
}
}
ReactDom.render(<App />, document.getElementById('check-box'));