The name
attribute of the RadioButton is used to group RadioButton. When the RadioButton are grouped in form, the checked items value
attribute
will be post to server on form submit that can be retrieved through the name. The disabled and unchecked RadioButton
value will not be sent to the server on form submit.
In the following code snippet, Credit / Debit card is in checked state. Now, the value that is in checked state will be sent on form submit.
import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
class App extends React.Component<{}, {}> {
public render() {
return (
<form>
<ul>
<li><RadioButtonComponent name="payment" value="credit/debit" label="Credit /Debit card" checked={true} /></li>
<li><RadioButtonComponent name="payment" value="netbanking" label="Net Banking" /></li>
<li><RadioButtonComponent name="payment" value="cashondelivery" label="Cash On Delivery" /></li>
<li><RadioButtonComponent name="payment" value="others" label="Others" /></li>
<li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
</ul>
</form>
);
}
}
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;
}
button {
margin: 0 0 0 5px;
}
li {
list-style: none;
margin: 25px auto;
}
import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
class App extends React.Component {
render() {
return (<form>
<ul>
<li><RadioButtonComponent name="payment" value="credit/debit" label="Credit /Debit card" checked={true}/></li>
<li><RadioButtonComponent name="payment" value="netbanking" label="Net Banking"/></li>
<li><RadioButtonComponent name="payment" value="cashondelivery" label="Cash On Delivery"/></li>
<li><RadioButtonComponent name="payment" value="others" label="Others"/></li>
<li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
</ul>
</form>);
}
}
ReactDom.render(<App />, document.getElementById('radio-button'));