The left group is native HTML radio behavior. The right group is an author-side opt-in pattern that clears the selected item when it is activated again.
1. Select one value in the native radio group.
2. Activate the same radio again.
3. It remains checked. This matches the HTML radio button activation algorithm.
4. Use the clear button, or use the opt-in clearable group, to see how page authors can support a no-answer state without changing native radio semantics.
This sampler accompanies a proposal to make the no-selection state reachable through user activation. If a radio group has an author-provided default using the checked content attribute, activating the currently checked radio again should restore that default; otherwise it should clear the group.
function radioFromEventTarget(target) {
const element = target instanceof Element ? target : target.parentElement;
const radio = element.closest('input[type=radio]');
if (radio)
return radio;
const label = element.closest('label');
return label && label.control && label.control.type === 'radio' ?
label.control : null;
}
function installClearableRadios(root) {
let wasChecked = null;
root.addEventListener('pointerdown', event => {
const radio = radioFromEventTarget(event.target);
wasChecked = radio && radio.checked ? radio : null;
});
root.addEventListener('click', event => {
const radio = radioFromEventTarget(event.target);
if (radio && radio === wasChecked) {
event.preventDefault();
setTimeout(() => {
radio.checked = false;
radio.dispatchEvent(new Event('input', { bubbles: true }));
radio.dispatchEvent(new Event('change', { bubbles: true }));
});
}
wasChecked = null;
});
}