Change RadioButton state in React RadioButton component

18 Oct 2021 / 1 minute to read

The Essential JS 2 RadioButton contains 2 different states visually, they are as follows:

Checked
Unchecked

The RadioButton checked property is used to handle the checked and unchecked state. In the checked state an inner circle will be added to the visualization of RadioButton.

Source

Preview

app.tsx

index.html

index.css

app.jsx

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);

class App extends React.Component<{}, {}> {
  public render() {
return (
    <ul>
        {/* checked state. */}
        <li><RadioButtonComponent label="Option 1" name="state" checked={true} /></li>

        {/* unchecked state. */}
        <li><RadioButtonComponent label="Option 2" name="state" /></li>
    </ul>
);
  }
}
ReactDom.render(<App />, document.getElementById('radio-button'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='radio-button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.e-radio-wrap {
  margin-top: 18px;
}

li {
  list-style: none;
  margin: 25px auto;
}

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);
class App extends React.Component {
    render() {
        return (<ul>
        
        <li><RadioButtonComponent label="Option 1" name="state" checked={true}/></li>

        
        <li><RadioButtonComponent label="Option 2" name="state"/></li>
    </ul>);
    }
}
ReactDom.render(<App />, document.getElementById('radio-button'));