3

I'm trying to apply styles for checkboxes from Lightning Design System in my custom Lightning component. I would like to use <ui:inputCheckbox> standard lightning component, but looks like not all standard Lightning components compatible with Lightning Design System.

In the SLDS doc there is a statement regarding checkboxes:

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

And the example from doc looks like this:

<label class="slds-checkbox" for="checkboxSample1">
    <input name="checkbox" type="checkbox" id="checkboxSample1" />
    <span class="slds-checkbox--faux"></span>
    <span class="slds-form-element__label">Checkbox Label</span>
  </label>

But <ui:inputCheckbox> tag generates following html code:

<div class="uiInput uiInputCheckbox">
  <label class="uiLabel-left uiLabel">
    <span>Reimbursed?</span>
  </label>
  <input type="checkbox" class="uiInput uiInputCheckbox">
</div>

So my question - Is it possible to use standard lightning checkbox component and style it with SLDS styles?

2

Possible work-around is to remove the style sheet dynamically in the rendering of the app.

This solution is described in the answer of Lightning Design System is overridden by styles from app.css

Let me know if it worked!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.