lwc lightning-checkbox-group - display checkboxes horizontally [duplicate]

Question

Can I display the checkboxes horizontally using lightning-checkbox-group tag?

<lightning-checkbox-group
                            onchange={handleChange}
                            name={objectInfo.data.fields.Reason__c.apiName}
                            label={objectInfo.data.fields.Reason__c.label}
                            options={reasonOptions}
                            value={recordInput.fields.Reason__c}></lightning-checkbox-group>

Answer 1

<lightning-checkbox-group   class="checkboxClass"
                            name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}></lightning-checkbox-group>

we have to override CSS :

Create a CSS file and add in static resource

File Content :

.checkboxClass .slds-form-element__control{
    display: -webkit-box;
    display: flex;
}

Import That static resource file in your component
import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

Call it in reRenderCallback

renderedCallback(){
  if(this.isCssLoaded) return
  this.isCssLoaded = true;
  loadStyle(this,CUSTOMCSS).then(()=>{
    console.log('loaded');
  })
  .catch(error=>{
    console.log('error to load');
  });
}