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?


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>
| improve this answer | |

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.