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.
We suggest that we can also get the value of the RadioButton by using the getSelectedValue method.
Please get back to us, if you need further assistance.
Regards,
Gayathri K
