[SalesForce] How to reset or deselect lightning-radio-group option

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

Best Answer

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, track } from 'lwc';

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

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

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