Customized checkbox in React Check box component

2 Mar 20269 minutes to read

Customize checkbox appearance

Customize the CheckBox component’s appearance by defining CSS rules and assigning the class name to the cssClass property. Custom CSS allows you to modify colors, borders, and visual styles for different checkbox variants.

The following example demonstrates how to create CheckBox variants by customizing the background and border colors to represent primary, success, warning, danger, and informational states:

app.jsx

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize CheckBox appearance.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

app.tsx

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To customize CheckBox appearance.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

Custom frame

Customize the CheckBox frame by adding CSS rules to modify its shape and appearance. The following example demonstrates how to create round checkboxes by setting the border-radius to 100% using the e-custom class:

app.jsx

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.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

app.tsx

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.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

Custom check icon

Customize the CheckBox check icon by adding CSS rules to modify the icon content, background, and border colors. The following example demonstrates how to customize the check icon appearance in focus and hovered states using the e-checkicon class:

app.jsx

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.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

app.tsx

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.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));