This post explains how to implement radio buttons in the lightning web components(lwc)
RadioButtonsInLWC.html
RadioButtonsInLWC.js
RadioButtonsInLWC.js-meta.xml
Output
RadioButtonsInLWC.html
<template>
<lightning-card title="Radio Group in LWC">
<div style="margin-left:3%;">
<lightning-radio-group label="Account Type"
name="radioButtonGroup"
onchange={handleChange}
options={options}
value={selectedValue}
type="radio"></lightning-radio-group>
<br/>
<div if:true={selectedValue}>
Selected Vlaue: <b>{selectedValue}</b>
</div>
</div>
</lightning-card>
</template>
RadioButtonsInLWC.js
import { LightningElement, wire, track} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';
export default class RadioButtonsInLWC extends LightningElement {
@track selectedValue;
@track options = [];
// object info using wire service
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo;
// Getting Account Type Picklist values using wire service
@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
typePicklistValues({error, data}) {
if(data) {
let optionsValues = [];
for(let i = 0; i < data.values.length; i++) {
optionsValues.push({
label: data.values[i].label,
value: data.values[i].value
})
}
this.options = optionsValues;
window.console.log('optionsValues ===> '+JSON.stringify(optionsValues));
}
else if(error) {
window.console.log('error ===> '+JSON.stringify(error));
}
}
// handle the selected value
handleChange(event) {
this.selectedValue = event.detail.value;
}
}
RadioButtonsInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RadioButtonsInLWC">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output
How to make this radio group view horizontal?
ReplyDeleteDid you find solution for this? I am looking for same
ReplyDeletehttps://www.salesforcecodecrack.com/2019/09/display-radio-buttons-group-in.html
DeleteHow to save the selected value to salesforce Field?
ReplyDeleteyou cant
DeleteI have two radio buttons, one label Yes with a string value attached to it and another label No with a string value attached. How can I display the value of the radio button selected?
ReplyDeleteThis is very similar to what I am implementing. You need to look at the options property in the .js file and rewrite the assignment (this.options) to fit your needs.
Delete// @track
Deleteoptions = [{
label: 'Yes',
value: someStringValue
},
{
label: 'No',
value: someStringValue
}];
Is there an way to show hover text on each radio group(when mouse is hovered on each radio group text).
ReplyDelete