
Key Highlights:
- Create a custom css class and upload in Static resource
- Import the static resource in Javascript file
- Load custom styles in rendercallback in javascript file
- 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