Label and size in React Checkbox

4 Sep 20264 minutes to read

This section explains the different sizes and labels available in the React Checkbox component.

Label

Define the React Checkbox caption using the label property. This eliminates the need for separate label elements. Customize the label position before or after the React Checkbox using the labelPosition property.

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);
function App() {
    return (<ul>
          {/* Label position - Left. */}
          <li><CheckBoxComponent label="Left Side Label" labelPosition="Before"/></li>

          {/* Label position - Right. */}
          <li><CheckBoxComponent label="Right Side Label" checked={true}/></li>
      </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));
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);

function App() {
  return (
      <ul>
          {/* Label position - Left. */}
          <li><CheckBoxComponent label="Left Side Label" labelPosition="Before" /></li>

          {/* Label position - Right. */}
          <li><CheckBoxComponent label="Right Side Label" checked={true} /></li>
      </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

Size

The React Checkbox component offers two size options: default and small. Apply the small size by setting the cssClass property to e-small. Use small React Checkboxes in compact layouts or data tables.

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);
function App() {
    return (<ul>
          {/* Small CheckBox. */}
          <li><CheckBoxComponent label="Small" cssClass="e-small"/></li>

          {/* Default CheckBox. */}
          <li><CheckBoxComponent label="Default"/></li>
      </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));
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);

function App() {
  return (
      <ul>
          {/* Small CheckBox. */}
          <li><CheckBoxComponent label="Small" cssClass="e-small" /></li>

          {/* Default CheckBox. */}
          <li><CheckBoxComponent label="Default" /></li>
      </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

See Also