What CSS would be required to make the items in a lightning:checkboxGroup display horizontally rather than the default of vertical?

  • 3
    what have you tried so far?? using some CSS you can change the appearance as per your requirement.. May 21, 2018 at 7:33

2 Answers 2

<!DOCTYPE html>

    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="assets/styles/salesforce- lightning-design-system.css" />
<div class="slds-form-element">
<div class="slds-form-element__control">
<span class="slds-checkbox">
    <input type="checkbox" name="options" id="checkbox-2" value="checkbox-2" />
         <label class="slds-checkbox__label" for="checkbox-2">
            <span class="slds-checkbox_faux"></span>
            <span class="slds-form-element__label">Checkbox Check-1</span>

    <input type="checkbox" name="options1" id="checkbox-3" value="checkbox-3" />
    <label class="slds-checkbox__label" for="checkbox-3">
            <span class="slds-checkbox_faux"></span>
            <span class="slds-form-element__label">Checkbox Check-2</span>
  • 1
    How are we supposed to 'use' this code? It would be much better to paste the code here; make sure to indent it by 4 spaces to make sure it's readable (hit Ctrl + K or the 'Code Sample' button in the editor).
    – Glorfindel
    Jun 7, 2018 at 7:37
  • Does it resolve your issue? Jun 7, 2018 at 16:21
  • Thank you! It would be even better with some explanation and a screenshot :)
    – Glorfindel
    Jun 7, 2018 at 16:23
  • I asked for CSS not HTML. This answer does not help, please delete.
    – Robs
    Jun 11, 2018 at 14:03

The CSS required to make the checkbox options display horizontally rather than vertically:

.THIS .slds-checkbox {
    display: inline !important;

To be added to the lightning component CSS

Note, you can achieve the same thing for radio button options using:

.THIS .slds-radio {
    display: inline !important;

You must log in to answer this question.

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