JSFiddle - React, Tailwind, and code Playground

by hambern

HTML

<h3>Är detta en fråga?</h3>

<input id="radio_1" value="1" type="radio" name="test">
<label for="radio_1">Radio 1</label>

<input id="radio_2" value="2" type="radio" name="test">
<label for="radio_2">Radio 2</label>

<input id="radio_3" value="3" type="radio" name="test">
<label for="radio_3">Radio 3</label>

CSS

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  padding: 1em 2em;
  background: lightgray;
  cursor: pointer;
  border-radius: .5em;
}

input[type="radio"] + label:hover {
  background: gray;
}

input[type="radio"]:checked + label {
  background: green;
  color: white;
}