HelpBot Assistant

How can I help you?

Label and size in React Radio button component

2 Mar 20265 minutes to read

This section explains the different sizes and label configurations available in the RadioButton component.

Label

Use the label property to add a caption for the RadioButton without manually creating a separate HTML label element. Control label positioning relative to the RadioButton using the labelPosition property, allowing the label to appear before or after the RadioButton 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 RadioButton 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 RadioButton 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