React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Change RadioButton state in React RadioButton component

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'));
Previous
Next