How to set name and value in React Checkbox

4 Sep 20263 minutes to read

The name attribute groups React Checkboxes in a form. When the form submits, only the values of checked React Checkboxes are sent to the server and can be retrieved using the name attribute. Disabled and unchecked React Checkbox values are not sent on form submission.

The following example demonstrates form submission with React Checkbox values. Cricket and Hockey are checked, Tennis is disabled, and Basketball is unchecked. Only the checked values are sent on form submit:

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent } 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><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball"/></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent} 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><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball" /></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));