HTML: Radio Button

By Xah Lee. Date: . Last updated: .

Here's how to create a HTML radio button selection input.


Only one can be selected (of the group that has the same name value name="…".).

<label><input type="radio" name="radioPets28642" value="dog">Dog</label>
<label><input type="radio" name="radioPets28642" value="cat" checked>Cat</label>
<label><input type="radio" name="radioPets28642" value="bird">Bird</label>

<span id="showBox77087"></span>
const radioPets28642 = document. querySelectorAll ('input[name="radioPets28642"]');
const showBox77087 = document. getElementById ('showBox77087');

const f_update = (() => {
let selectedValue = document. querySelector('input[name="radioPets28642"]:checked').value;
showBox77087 .textContent = selectedValue;

Array.from ( radioPets28642 ) .forEach (((x) => { x .addEventListener ('input', f_update, false) }));


DOM How-To

Web Scripting Overview

HTML Input

Web Scripting Examples

Web Scripting Misc



Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials