Label and size in React Radio Button

4 Sep 20265 minutes to read

This section explains the different sizes and label configurations available in the React Radio Button component.

Label

Use the label property to add a caption for the React Radio Button without manually creating a separate HTML label element. Control label positioning relative to the React Radio Button using the labelPosition property, allowing the label to appear before or after the React Radio Button indicator.

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } 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><RadioButtonComponent label="Left Side Label" name="position" labelPosition="Before"/></li>

          {/* Label position - Right. */}
          <li><RadioButtonComponent label="Right Side Label" name="position" checked={true}/></li>
      </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } 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><RadioButtonComponent label="Left Side Label" name="position" labelPosition="Before" /></li>

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

Size

The React Radio Button component supports two size variants: default (standard size) and small (compact size). Apply the e-small CSS class through the cssClass property to create a smaller, more compact React Radio Button suitable for dense layouts or space-constrained interfaces.

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    return (<ul>
          {/* Small RadioButton. */}
          <li><RadioButtonComponent label="Small" name="size" cssClass="e-small"/></li>

          {/* Default RadioButton. */}
          <li><RadioButtonComponent label="Default" name="size"/></li>
      </ul>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
  return (
      <ul>
          {/* Small RadioButton. */}
          <li><RadioButtonComponent label="Small" name="size" cssClass="e-small" /></li>

          {/* Default RadioButton. */}
          <li><RadioButtonComponent label="Default"  name="size" /></li>
      </ul>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));

See Also