Search code examples
radio-buttonreact-bootstraptogglebutton

How can I remove the radio icon from a ToggleButton in a ToggleButtonGroup?


I am trying to create a button group where a user can choose between multiple options. react-bootstrap 2.0.0-rc.0 provides the combination ToggleButtonGroup + ToggleButton for this purpose. Unfortunately, a radio icon appears next to the button. I want to get rid of it. Below, you can find a minimal example to reproduce the radio icon.

import * as React from "react";
import {
  ToggleButton,
  ToggleButtonGroup,
} from "react-bootstrap";

interface OwnState {
  val: boolean;
}

export default class SomeToggleOptions extends React.Component<OwnProps, OwnState> {
  constructor(p: Readonly<OwnProps>) {
    super(p);
    this.state = { val: true }
  }

  setVal = (newVal: number) => {
    this.setState({
      val: newVal == 1
    })
  }

  render() {
    return (
      <div className="p-1 text-right">
        <span className="p-1">Auto Refresh:</span>
        <ToggleButtonGroup
          name="radio"
          size="sm"
          onChange={this.setVal}
          value={this.state.val ? 1 : 0}
        >
          {radios.map((radio, idx) => {
            return (
              <ToggleButton
                key={idx}
                id={`radio-${idx}`}
                variant={
                  this.state.val === radio.value ? "dark" : "outline-dark"
                }
                value={idx}
              >
                {radio.name}
              </ToggleButton>
            );
          })}
        </ToggleButtonGroup>
      </div>
    );
  }
}

NOTE: I already found React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle and this is NOT working for me.

The icon seems to disappear when I use the normal ButtonGroup + Button instead. But this is not primarily an option as you don't have the radio-like "exclusive" behavior there.


Solution

  • I reverted to the earlier react-bootstrap version 1.6.4. This is probably not fixable (without any hacky moves, css-overwriting, or similar) and induced by react-bootstrap 2.0.0 being only a release candidate so far.

    In the earlier react-bootstrap version, my code snippet worked flawless.