I want to select only one option in the group of radio buttons. i can only find class component code online. Also help me with a onChange function to handle this.
const [radioOption, setradioOption]= useState(true)
const handleRadioChange = () =>{
}
return(
<>
<Form.Group
inline
style={{
display:'flex',
justifyContent:'space-between'}}
>
<Form.Radio
onChange={handleRadioChange}
value="All devices"
label='All devices'
defaultChecked/>
<Form.Radio
onChange={handleRadioChange}
value='Mobile only'
label='Mobile only'/>
<Form.Radio
onChange={handleRadioChange}
value='Desktop only'
label='Desktop only'/>
</Form.Group>
</>)
To select only one option in the group of radio buttons you need to use same name in every input of radio. To save your choice we can use useState. Here is the complete example:
import React, { useState } from "react";
function Demo() {
const [gender, setGender] = useState("Male");
function onChangeValue(event) {
setGender(event.target.value);
console.log(event.target.value);
}
return (
<div onChange={onChangeValue}>
<input type="radio" value="Male" name="gender" checked={gender === "Male"} /> Male
<input type="radio" value="Female" name="gender" checked={gender === "Female"}/> Female
<input type="radio" value="Other" name="gender" checked={gender === "Other"} /> Other
</div>
);
}
export default Demo;