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 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
Lovesalesforceyes
