JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

Click <strong>here</strong> and press tab, see where the focus goes. Using the arrow keys or enter/space will select an item, and users know this because the focus state is present. If you press Tab again, the focus goes elsewhere.

<label><input type="radio" name="my-radio" value="a" /> Item A</label>
<label><input type="radio" name="my-radio" value="b" /> Item B</label>
<label><input type="radio" name="my-radio" value="c" /> Item C</label>
<label><input type="radio" name="my-radio" value="d" /> Item D</label>

CSS

label {
  display: block;  
}