JSFiddle - React, Tailwind, and code Playground

HTML

<span id="bool">
  <input checked="true" value="yes" type="radio" id="yes" name="bool">
  <label for="yes">Yes</label>
  <input value="no" type="radio" id="no" name="bool">
  <label for="no">No</label>
</span>

CSS

#bool {
  width: 160px;
  height: 32px;
  border: 1px solid black;
  border-radius: 7px;
  position: absolute;
}
#bool input {
  display: none;
}
#bool label {
  line-height: 32px;
  text-align: center;
  position: absolute;
  width: 80px;
  height: 32px;
}
#bool label[for="yes"] {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
#bool input:checked+label[for="yes"] {
  background-color: orange;
}
#bool label[for="no"] {
  right: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
#bool input:checked+label[for="no"] {
  background-color: silver;
}