I've built a Salesforce Lightning Design System page with some checkboxes on it. The way SLDS implements checkboxes looks really odd to me. I'd like to make one of those checkboxes to appear checked by default using the CSS framework without having to resort to adding JavaScript to the page to accomplish the task.

Unfortunately, it's unclear how to accomplish this using the SLDS CSS framework. I've tried all sorts of stuff without success.

Any ideas?

1 Answer 1


Here's the solution:

<div class="slds-media__body">
    <div class="slds-media">
        <div class="slds-media__figure">
            <label class="slds-checkbox" for="mark-complete">
                <input name="checkbox" type="checkbox" checked="true" id="mark-complete" />
                <span class="slds-checkbox--faux"></span>
                <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
        <div class="slds-media__body">
            <p class="slds-section-title slds-truncate"><a href="#">This is a checked checkbox</a></p>

You must log in to answer this question.

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