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).
ReplyDeleteI want my field values which are in foreach to show as radio buttons help me please
ReplyDelete