JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<form>
<label><input type="radio" name="options" value="1" checked>a</label><br>
<label><input type="radio" name="options" value="2">b</label><br>
<label><input type="radio" name="options" value="3">c</label><br>
<label for="four">Text Input <input id="four" type="text" value="text"></label>
</form>

<div id="output">

</div>

CSS

input[type="radio"] {
  margin-right: 10px;
}

#output {
  margin-top: 1em;
  padding: 5px 1em;
  min-height: 2em;
  line-height: 2em;
  border: 1px solid grey;
}

JavaScript

const out = document.getElementById('output');

document.querySelector('form').addEventListener('click', (e) => {
  if (e.target.tagName === 'INPUT' && e.target.type === 'radio') {
    out.innerText = e.target.value
    return;
  }
  out.innerText = 'Not A Radio Click';
});