Radio Group buttons in Lightning Web Component(lwc)

This post explains how to implement radio buttons in the lightning web components(lwc)

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