Syncfusion AI Assistant

How can I help you?

Name and value in form submit in React Radio button component

2 Mar 20263 minutes to read

Use the name attribute to group RadioButton components as mutually exclusive options. When grouped RadioButtons are submitted with a form, only the value attribute of the checked RadioButton is sent to the server—retrieved using the shared name attribute. RadioButtons that are disabled or unchecked do not submit their values.

In the example below, the payment method “Credit / Debit Card” is in the checked state. When the form is submitted, only this checked RadioButton’s value will be sent to the server.

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.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));
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.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));