I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes.

<design:component >

   <design:attribute name="childCheckbox1_label" label="Label Checkbox 1 "/>
   <design:attribute name="childCheckbox1_storage" label="Checkbox 1 Output 
   <design:attribute name="childCheckbox1_defaultValue" label="Checkbox 1 
   Default Value"/>

  <design:attribute name="childCheckbox2_label" label="Label Checkbox 2 "/>
  <design:attribute name="childCheckbox2_storage" label="Checkbox 2 Output 
  Value "/>
  <design:attribute name="childCheckbox2_defaultValue" label="Checkbox 2 
  Default Value"/>


I checked the code using inspect element. Found out this piece of code.

slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked .slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds- form-element_stacked:not([class*="slds-size"])

{ width: 100%; flex-basis: 100%; }

The width above is set to 100%. I need to change the width somehow in the above code. I tried to add the following in style class but it does not work.

.THIS.slds-form-element_stacked .slds-form_stacked .slds-form_horizontal { width: 3%; flex-basis: 100%; }

1 Answer 1


Create a .css file associated to the Aura Component (Ctrl+Shift+4 STYLE option in the Developer Console when you opened a Lightning Aura Component) and then adjust the CSS as you please.

Refer here (in the Aura CSS Becomes Standard CSS section) to an example of how the CSS looks in an Aura component.

Sample taken from that link:

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  • Thanks for the help. I guess I am struggling with how to reference checkboxes in style class. Tried this .THIS .childCheckbox1{ width:20%; } It didn't work.
    – Student
    Apr 28, 2019 at 20:22
  • Please note that .THIS.className and .THIS .className with a space in between makes a big difference. If the root of your component is just a checkbox, then you need to use .THIS.className. As for getting the CSS right, try inspecting the element in Google Chrome and adjust the CSS on the checkbox. Find what works and then adjust the aura components .css file Apr 28, 2019 at 20:24
  • Also, I don't think you can adjust the CSS on .design attributes that are seen from the Lightning App Builder - not sure from your question if that's what you're trying to accomplish Apr 28, 2019 at 20:26
  • I am using lightning component inside a visual/lightning flow to display the dynamic questions. Here is the link to the lightning component: github.com/alexed1/LightningFlowComponents/tree/master/…
    – Student
    Apr 28, 2019 at 20:40
  • I inspected the element in chrome and was able to track the issue. Width was set to 100%. When I unchecked it in console it worked. But when I refreshed the page, changes are not saved. Here is the code: How do I add it in CSS class? .slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked .slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds-form-element_stacked:not([class*="slds-size"]) { /* width: 100%; */ flex-basis: 100%; }
    – Student
    Apr 28, 2019 at 21:10

You must log in to answer this question.

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