Thursday, December 23, 2021

Get selected radio button value in LWC

This post explains how to get selected radio button in LWC. Below is demo of output :

Get selected radio button value in LWC

To use the radio button in LWC you have to use the lightning-radio-group tag. you can get the value of the selected radio button with the help of event.target.value .

RadioButton.cmp :

<template>
    <div style="background:white;padding:10px;">
        <lightning-radio-group name="RadioGroup"
                                label="SFDC"
                                options={options}
                                value={value}
                                onchange={valChange}
                                type="radio">
        </lightning-radio-group>
        <br/>
        <div>* Selected value is <b>{value}</b></div>
    </div>
</template>

RadioButton.js:

import { LightningElement } from 'lwc';
export default class RadioButton extends LightningElement {
    value = 'LWC';
    get options() {
        return [
            { label: 'LWC', value: 'LWC' },
            { label: 'SALESFORCE', value: 'SALESFORCE' },
            { label: 'LIGHTNING COMPONENT', value: 'LIGHTNING COMPONENT' },
        ];
    }
    valChange(event){
        this.value = event.target.value;
    }
}

RadioButton.meta:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>


Thanks, 
Lovesalesforceyes


Get selected radio button value in LWC

This post explains how to get selected radio button in LWC. Below is demo of output : To use the radio button in LWC you have to use the  li...