React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle

user_9330644 0
Viewed 1678

In my form, I want toggle buttons. The following code is copied from react-bootstrap docs on toggle buttons. However, the radio-button circles are displaying when they should be hidden. How do I hide them?

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton

'

<ButtonGroup>
   {radios.map((radio, idx) => (
    <ToggleButton
     key={idx}
     id={`radio-${idx}`}
     type="radio"
     variant={idx % 2 ? 'outline-success' : 'outline-danger'}
     name="radio"
     value={radio.value}
     checked={radioValue === radio.value}
     onChange={(e) => setRadioValue(e.currentTarget.value)}
                                    >
     {radio.name}
    </ToggleButton>
      ))}
 </ButtonGroup>
react-bootstrap togglebutton radio-button
4 Answers

Use the <ToggleButtonGroup /> component as the container. Set type to radio. Note that name is required when type is radio

See code below

<ToggleButtonGroup type="radio" name="radio">
  {radios.map((radio, idx) => (
    <ToggleButton
      key={idx}
      id={`radio-${idx}`}
      variant={idx % 2 ? 'outline-success' : 'outline-danger'}
      value={radio.value}
      checked={radioValue === radio.value}
      onChange={(e) => setRadioValue(e.currentTarget.value)}
    >
      {radio.name}
    </ToggleButton>
  ))}
</ToggleButtonGroup>
user_35308840

The accepted answer didn't work for me, but adding this to my CSS did the trick:

[type='radio'] {
  display: none; 
}

h/t to this answerer

user_70046530

The issue appears to occur temporarily when upgrading to new react-bootstrap (v1=>v2): https://github.com/react-bootstrap/react-bootstrap/issues/5782

Some steps that can solve the issue:

  1. Restart your react app
  2. Clear cache (Google Chrome right click on refresh gives this option)
  3. Restart docker container if applicable
  4. Run npm list react-bootstrap to see if version is correct
  5. Run npm ci for clean slate with your packages
  6. If no combination of these works, file a separate issue or reply to issue linked above.

Alternative solution (not recommended)

.btn-group input[type='radio'] {
    display: none; 
}
user_82914150

The issue is actually related to failing to include the stylesheet. I had this problem and the other answers didnt help but including the stylesheet fixed it for me

import 'bootstrap/dist/css/bootstrap.min.css';

React-Bootstrap CSS

user_44051830
Related