HelpBot Assistant

How can I help you?

Label and size in React Check box component

2 Mar 20264 minutes to read

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

Label

Define the CheckBox caption using the label property. This eliminates the need for separate label elements. Customize the label position before or after the 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 CheckBox component offers two size options: default and small. Apply the small size by setting the cssClass property to e-small. Use small 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