checkboxes bootstrap react radio buttons not working-CodePudding

I'm building a form where it has two checkboxes the user is allowed to choose only one not both of them

I have used the react-bootstrap form

here is my code:

 const [checked, setChecked] = useState("");
  const [sechecked, setSechecked] = useState("");

return

  <Form style={{ display: "flex" }}>
            <Form.Check
              value={checked}
              onChange={(e) => setChecked(e.target.checked)}
              type="radio"
              aria-label="radio 1"
            />
            Turkiye'den gonder
            <Form.Check
              value={sechecked}
              onChange={(e) => {
                setSechecked(e.target.sechecked);
                console.log(checked);
              }}
              type="radio"
              aria-label="radio 2"
            />
            Turkiye'ye getir
          </Form>

so, what I want is to only choose one checkbox and after that, the user can't choose the other one

CodePudding user response：

Kindly add a name property to indicate the two options point to the same thing. In that case, only one can be selected

const [checked, setChecked] = useState("");
  const [sechecked, setSechecked] = useState("");

return

  <Form style={{ display: "flex" }}>
            <Form.Check
              value={checked}
              name="useroption"
              onChange={(e) => setChecked(e.target.checked)}
              type="radio"
              aria-label="radio 1"
            />
            Turkiye'den gonder
            <Form.Check
              value={sechecked}
              name="useroption"
              onChange={(e) => {
                setSechecked(e.target.sechecked);
                console.log(checked);
              }}
              type="radio"
              aria-label="radio 2"
            />
            Turkiye'ye getir
          </Form>