0

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>
3
  • Check if this helps? May 5, 2021 at 12:36
  • @ShivankurNaikwade - I guess so . . . so basically, I can't use lightning-checkbox-group if I want to display checkboxes horizontally.
    – mackmama
    May 6, 2021 at 11:10
  • In that case,you can go with the approach shared on above thread, due to Shadow DOM May 6, 2021 at 11:57

1 Answer 1

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');
  });
}
1
  • That is awesome. It worked with the oob sf tags!
    – mackmama
    May 10, 2021 at 19:41

Not the answer you're looking for? Browse other questions tagged .