How to reset or deselect lightning-radio-group option

Question

Once selected, radio buttons cannot be deselected. Is there a way to reset the lightning-radio-group component or deselect the selected option?

Answer 1

Just set the value to undefined like so:

<template>
    <lightning-radio-group name="radioGroup"
                        label="Radio Group"
                        options={options}
                        value={value}
                        onchange={handleRadioChange}
                        type="radio"></lightning-radio-group>
    <lightning-button label="Reset" onclick={handleResetClick}></lightning-button>
</template>

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    options = [
        {label: 'a', value: 'a'},
        {label: 'b', value: 'b'},
        {label: 'c', value: 'c'},
    ];
    value;

    handleRadioChange(event) {
        console.log(event.target.value);
        this.value = event.target.value;
    }

    handleResetClick() {
        this.value = undefined;
    }
}