CODEWITHSUNDEEP
cssreactjs
Ming
Ming

Reputation: 1602

Radio Button Group: on click unselect another group

Hello I have a problem creating a radio button group, when I select an option in another group it deselects the other group

this is the code:

<>
      <div className="orientation_mode">
        <h1>Orientação do Dashboard</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>Modo de Tema</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>
</>

here has full code:

codesandbox: https://codesandbox.io/s/recursing-shockley-9jvey?file=/src/RadioButton.tsx

on gif: enter image description here

Upvotes: 0

Views: 34

Answers (1)

buzatto
buzatto

Reputation: 10382

at your css, change focus to checked:

&:checked + .radio__control { // style here }

at your radioButton add the other properties to input, including type=radio:

<input type="radio" className="radio" id={id} name={name} value={value} onChange={onChange} checked={checked} />

onChange type definition becomes:

onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

at App add states to control theme and orientation:

  const [theme, setTheme] = useState('light');
  const [orientation, SetOrientation] = useState('horizontal');
  const handleTheme = (e: React.ChangeEvent<HTMLInputElement>) => setTheme(e.target.value)
  const handleOrientation = (e: React.ChangeEvent<HTMLInputElement>) => SetOrientation(e.target.value)

pass onChange and checked properties like below:

        <RadioButton
          id="dark"
          name="theme_modes"
          onChange={handleTheme}
          label="Dark"
          value="dark"
          checked={ theme === 'dark' } // you can also pass theme instead and validate inside RadioButton
        />

functional example: https://codesandbox.io/s/quirky-cookies-1nru9?file=/src/App.tsx

Upvotes: 2

Related Questions