Key Highlights:

  1. Create a custom css class and upload in Static resource
  2. Import the static resource in Javascript file
  3. Load custom styles in rendercallback in javascript file
  4. add Custom css to lightning-radio-group class
HTML:
<template>
    <lightning-card class="slds-m-around_medium slds-grid slds-grid_align-horizontal" title="Allign the Radio Group Bottons Horizontally">
        <lightning-radio-group class="slds-p-around_small customRadioCls"
                options={options}
                name="radioGroup"
                label="Radio Group">
            </lightning-radio-group>
    </lightning-card>
</template>
Javascript:
import { LightningElement } from 'lwc';
import demostaticresource from '@salesforce/resourceUrl/demostaticresource';
import { loadStyle } from 'lightning/platformResourceLoader';
export default class RadiogroupbuttonHorizontalAlign extends LightningElement {
    options = [
        { label: 'Yes', value: 'Yes' },
        { label: 'No', value: 'No' }
        
    ];
    renderedCallback() {
        Promise.all([
            loadStyle(this, demostaticresource + '/demostaticresource/css/cssstyles.css')
        ])
    }
}
CSS from Static Resource:
.customRadioCls .slds-form-element__control .slds-radio
{
    display: inline-block !important;
}

Leave a comment

I’m Naveen Kumar Reddy
Naveen

Welcome to Sage cloud

Let’s connect