title: React with bootstrap and Radio buttons
body: <p>I'm trying to use radio buttons in React (that I always used) but this time with <code>react-bootstrap</code>.
  I have two radio buttons and I want just one to be checked and get that value.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Form, Button } from &quot;react-bootstrap&quot;;
  
  const StandAdd = () =&gt; {
    const [item, setItem] = useState({
      kindOfStand: &quot;&quot;
    });
  
    const { kindOfStand } = item;
  
    const handleInputChange = event =&gt; {
      event.preventDefault();
      setItem({ ...item, [event.target.name]: event.target.value });
    };
  
    const handleSubmit = event =&gt; {
      event.preventDefault();
      alert(`${kindOfStand}`);
    };
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;Form.Group controlId=&quot;kindOfStand&quot;&gt;
          &lt;Form.Check
            type=&quot;radio&quot;
            aria-label=&quot;radio 1&quot;
            label=&quot;Design&quot;
            onChange={handleInputChange}
            checked={kindOfStand === &quot;design&quot;}
            // value=&quot;design&quot; // &lt;-- once enabled I can't select it
          /&gt;
          &lt;Form.Check
            type=&quot;radio&quot;
            aria-label=&quot;radio 2&quot;
            label=&quot;Food&quot;
            onChange={handleInputChange}
            checked={kindOfStand === &quot;food&quot;}
            // value=&quot;food&quot; // &lt;-- once enabled I can't select it
          /&gt;
        &lt;/Form.Group&gt;
        &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
          Submit
        &lt;/Button&gt;
      &lt;/form&gt;
    );
  };
  
  export default StandAdd;
  </code></pre>
  <p>Codesandbox link: <a href="https://codesandbox.io/s/react-bootstrap-radio-button-1d443" rel="nofollow noreferrer">https://codesandbox.io/s/react-bootstrap-radio-button-1d443</a></p>
  <p>any idea on how to get the value?</p>