Hey there, I'm facing an issue while trying to create a radio button group. When I choose an option in one group, it automatically deselects the options in the other group.
Here's the code snippet:
<>
<div className="orientation_mode">
<h1>Dashboard Orientation</h1>
<div className="options">
<form>
<fieldset id="orientation_mode">
<RadioButton
onChange={handleInputChange}
id="vertical"
color="#c8c8c8"
name="orientation_mode"
label="Vertical"
value="vertical"
checked={layoutStore.layoutType === 'vertical'}
/>
<RadioButton
id="horizontal"
color="#c8c8c8"
name="orientation_mode"
onChange={handleInputChange}
label="Horizontal"
value="horizontal"
checked={layoutStore.layoutType === 'horizontal'}
/>
</fieldset>
</form>
</div>
</div>
<div className="theme_modes">
<h1>Theme Mode</h1>
<div className="options">
<form>
<fieldset id="theme_modes">
<RadioButton
id="dark"
name="theme_modes"
onChange={handleInputChange}
label="Dark"
value="dark"
/>
<RadioButton
id="semidark"
name="theme_modes"
onChange={handleInputChange}
label="Semi Dark"
value="semidark"
/>
<RadioButton
id="light"
name="theme_modes"
onChange={handleInputChange}
label="Light"
value="light"
/>
</fieldset>
</form>
</div>
</>
In case you need the complete code, visit this codesandbox link: https://codesandbox.io/s/recursing-shockley-9jvey?file=/src/RadioButton.tsx
You can also check out the animation demonstration here: https://i.sstatic.net/NypZb.gif