function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SvanekeySvanekey 

Custom Labels as values in LWC Radio Group

Hi Folks, 

I am trying to assign Custom Labels as a Radio Group values into LWC but with no success. Please share your thoughs how do I do that Properly?  

- So I imported Custom labels into JS file. 
- Stored them into label object
- How do assign it to "Options" that Radio group could use it? 

Please see code below and screen shoot, how it should look like at the end. So in place of the current Radio Options, there should be custom labels displayed.

HTML **************************************************************

            <lightning-radio-group name="Random Radio"
                        label="Radio"
                        options={options}
                        value={value}
                        required
                        type="radio"
                        onchange= {handleChange}>
            </lightning-radio-group>    

JS ******************************************************************

import { LightningElement, wire, track, api } from 'lwc';
import customLabel1 from '@salesforce/label/c.label1';
import customLabel2 from '@salesforce/label/c.label2';
import customLabel3 from '@salesforce/label/c.label3';

export default class RandomClass extends LightningElement {

label {
    label1,
    label2,
    label3
}

get options() {
        return [
            { //Custom Label 1 Here },
            { //Custom Label 2 Here },
            { //Custom Label 3 Here },

        ];  
    }
}

Best Answer chosen by Svanekey
Jaya Karthik karnatiJaya Karthik karnati
Hi Svanekey,

we can import custom labels and while passing in JS , instead of hardcoding we can pass custom labels.

Here is the code.
HTML : 
<template>
    <lightning-radio-group name="radioGroup"
                          label="Reject Reason"
                          options={options}
                          value={value}
                          type="radio"></lightning-radio-group>
</template>

JS : 
import { LightningElement } from 'lwc';
import customlabel1 from '@salesforce/label/c.label1';
import customlabel2 from '@salesforce/label/c.label2';
import customlabel3 from '@salesforce/label/c.label3';
export default class LWCImportLabel extends LightningElement {
value = '';

    get options() {
        return [
            { label: customlabel1, value: customlabel1 },
            { label: customlabel2, value: customlabel2 },
            { label: customlabel3, value: customlabel3 },
        ];
    }
}

The UI :
User-added image

Hope this helps , Kindly mark this as best answer .

Thanks,
​​​​​​​karthik