Display Radio Buttons Group In Horizontal View in Lightning Component(AURA)

This post explains how to implement a radio group in the horizontal view in lightning components.

Component

<aura:component controller="LWCExampleController" implements="flexipage:availableForAllPageTypes">
    <!--Declaring variables-->
    <aura:attribute name="picklistValues" type="String[]"/>
    <aura:attribute name="selectedValue" type="String"/>
    <aura:attribute name="mapPicklistValues" type="Map" />

    <aura:handler action="{!c.fetchPicklistValues}" name="init" value="{!this}"/>

    <div class="slds-box slds-theme_default">
        <h2>
            <p>Radio Buttons in Horizontal View in Lightning Component</p>
        </h2><br/>
        <aura:iteration items="{!v.picklistValues}" var="item">
            <fieldset style="display: block; float: left;">
                <div class="slds-form-element__control">
                    <span class="slds-radio">
                        <input id="{!item}" name="radiogroup" onchange="{!c.handleSelected}" type="radio" value="{!item}"/>
                        <label class="slds-radio__label" for="{!item}">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">{!item}</span>
                        </label>
                    </span>
                </div>
            </fieldset>
        </aura:iteration><br/><br/>
        <aura:if isTrue="{!not(empty(v.selectedValue))}">
            <div>
                Selected Vlaue:
                <b>{!v.selectedValue}</b>
            </div>
        </aura:if>
    </div>
</aura:component>

Component Controller:

({
    fetchPicklistValues : function(component, event, helper) {
       
        var action = component.get("c.getAccRatings");
        var options=[];
        action.setCallback(this, function(response) {
            let state = response.getState();
            if(state === 'SUCCESS') {
                var mapValues = response.getReturnValue();
                component.set('v.mapPicklistValues', mapValues);
                let picklistValuesList = [];

                for(let key in mapValues) { 
                    picklistValuesList.push(mapValues[key]);
                }
            
                component.set("v.picklistValues", picklistValuesList);
            }
             
        });
        $A.enqueueAction(action); 
    },

    handleSelected : function(component, event, helper) {
        let currentValue = event.target.value;
        
        let mapValues = component.get('v.mapPicklistValues');
        let selectedValue;
        for(let key in mapValues) {
            if(currentValue == mapValues[key]) {
                selectedValue = key;
                break;
            }
        }
        component.set('v.selectedValue', selectedValue);

    }
})

Apex Class

public inherited sharing class LWCExampleController {
    @AuraEnabled
    public static map<String, String> getAccRatings(){
        map<String, String> options = new map<String, String>();
        Schema.DescribeFieldResult fieldResult = Account.Rating.getDescribe();
        List<Schema.PicklistEntry> lstPicklistValues = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry iterator: lstPicklistValues) {
            options.put(iterator.getValue(), iterator.getLabel());
        }
        return options;
    }
}

Output