Monday, September 16, 2019

Display Radio Buttons Group in Horizontal view in Lightning Web Component(lwc)

This post explains how to display radio buttons group in Horizontal view in Lightning Web Components(lwc)


radioGroupInHorizontal.html
<template>
    <lightning-card title="Radio Buttons Group Horizontal View in Lightning Web Component"><br/>
        <div style="margin-left:3%;">
            <template for:each={options} for:item="item">
                <fieldset key={item.value} style="display: block; float: left;">
                    <div class="slds-form-element__control">
                        <span class="slds-radio">
                            <input name="radiogroup" id={item.value} type="radio" value={item.value} onchange={handleSelected}/>
                            <label class="slds-radio__label" for={item.value}>
                                <span class="slds-radio_faux"></span>
                                <span class="slds-form-element__label">{item.label}</span>
                            </label>
                        </span>
                    </div>
                </fieldset>
            </template><br/><br/>

            <div if:true={selectedValue}>
                Selected Vlaue: <b>{selectedValue}</b>
            </div>
        </div>

    </lightning-card>
</template>

radioGroupInHorizontal.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 Rating_FIELD from '@salesforce/schema/Account.Rating';

export default class RadioGroupInHorizontal extends LightningElement {
    @track selectedValue;
    @track options = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    // Getting Account Rating Picklist values using wire service
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Rating_FIELD})
    ratingPicklistValues({error, data}) {
        if(data) {
            window.console.log('result ===> '+JSON.stringify(data.values));
            this.options = data.values;
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // handle the selected value
    handleSelected(event) {
       window.console.log('selected value ===> '+event.target.value);
       this.selectedValue = event.target.value;
    }

}

RadioGroupInHorizontal.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RadioGroupInHorizontal">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output


6 comments:

  1. How to make a value checked by default?

    ReplyDelete
    Replies
    1. were you able to check the first radio button by default?

      Delete
  2. Thanks for the post! This is nice idea.

    ReplyDelete
  3. How can i set a value back to the radio button from the JS

    ReplyDelete
  4. How to make first radio button selected defaultly?

    ReplyDelete
  5. To check a particular radio button in this example, add a data-id to the html:

    (html)
    input name="radiogroup" data-id="myButton" id={item.value} type="radio" value={item.value} onchange={handleChange} required/>

    (javascript)
    renderedCallback(){
    this.template.querySelector('input[data-id="myButton"]').checked = true;
    }

    ReplyDelete