Radio button group?

[ONG YU FENG]

Hi there

I want to create two radio button that is grouped. at any one time, when on check on the radio button, i should be able to get value from it. I am unable to see any example nor information on radio button group.

Could you assist on this?

[Gayathri KarunaiAnandam]

Hi Ong, 

Thank you for contacting Syncfusion Support. 

We have checked your reported query. We can group the Radiobutton by using the name attribute in Radiobutton. We have prepared a Radiobutton sample in which values are displayed. Please check the below code snippet. 

constructor() { 

    super(...arguments); 

    this.changeOption1 = () => { 

      document.getElementById("text").innerText = 

        "Selected : " + this.radioInstance1.value; 

    }; 

    this.changeOption2 = () => { 

      document.getElementById("text").innerText = 

        "Selected : " + this.radioInstance2.value; 

    }; 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <div className="radiobutton-control"> 

            <div id="text">Selected : Credit/Debit Card</div> 

 

            <div className="row"> 

              <RadioButtonComponent 

                checked={true} 

                label="Credit/Debit card" 

                name="payment" 

                value="credit/debit" 

                change={this.changeOption3} 

                ref={radio1 => (this.radioInstance1 = radio1)} 

              /> 

            </div> 

            <div className="row"> 

              <RadioButtonComponent 

                label="Net Banking" 

                name="payment" 

                value="netbanking" 

                change={this.changeOption2} 

                ref={radio2 => (this.radioInstance2 = radio2)} 

              /> 

            </div> 

             

          </div> 

        </div> 

      </div> 

    ); 

  } 

} 

 

render(<RadioButton />, document.getElementById("sample")); 

 

For your reference, we have prepared a sample based on this scenario. Please check the below sample. 

Sample: https://stackblitz.com/edit/react-ukm4kd?file=index.js 

We suggest that we can also get the value of the RadioButton by using the getSelectedValue method. 

Link: https://ej2.syncfusion.com/react/documentation/api/radio-button/#getselectedvalue 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K