How to set up the default value for checkbox in slds

Question

I am not talking about <ui:inputCheckBox>. Suppose I am using slds in VF page and below is the sample code:

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-checkbox">
                    <input type="checkbox" name="options" id="isactive-checkbox" checked="{!conn.is_Active__c}" disabled="true" />
                    <label class="slds-checkbox__label" for="isactive-checkbox">
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label">is Active</span>
                    </label>
                </span>
            </div>
        </div>

This code won't work for setting the default value. checked="{!conn.is_Active__c}" will simply not work. It will always be checked.

I can setup the checked attribute using javascript but I am wondering whether it is the only option. And plus, <apex:inputField> doesn't seem to work very well in the checkbox scenario.

is it similar to this http://salesforce.stackexchange.com/questions/93706/how-do-i-make-a-slds-checkbox-default-to-appear-checked ? — unidha, Nov 08 '16 at 01:54
@unidha I have actually read that one before submitting this question. In that scenario, it is just default to checked so it will be easy. — Lance Shi, Nov 08 '16 at 02:00
I have written a blog about this at: http://sfdcinpractice.com/index.php/2016/11/12/make-checkbox-visualforce-page-works-slds/ — Lance Shi, Nov 22 '16 at 01:17

score 5 · Accepted Answer · edited Apr 13 '17 at 12:54

5

When using the SLDS Checkbox along with an input field the checkbox works as expected and will default as appropriate when done like this:

<div class="slds-form-element slds-align--absolute-center">
    <label class="slds-checkbox">
        <apex:inputCheckbox styleClass="slds-input"
                            value="{!Account.Owner.isActive}"
        />
        <span class="slds-checkbox--faux"></span>
    </label>
</div>

Is an example of using it on a page with an Account Standard Controller..

See what I found here: SLDS and inputField checkbox

You need to wrap the input in the label and remove the for attribute. If you do not remove the for attribute the behavior of the checkbox is not as expected.

The documentation around placing the input inside the label tag is on the Lightning Site and is summarized below:

To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox--faux class

edited Apr 13 '17 at 12:54

Community

1

answered Nov 08 '16 at 02:48

Eric

54,152
11
100
195

This is brilliant approach. I will try it out – Lance Shi Nov 08 '16 at 03:15
@LanceShi - If you have any issues I will post a full example with page, template, etc. I know it works because I use it all the time :) so don't give up – Eric Nov 08 '16 at 03:16
@LanceShi - Also, when you really get into it and want to do an autocomplete component for VF SLDS take a look at my accepted answer here: http://salesforce.stackexchange.com/questions/144442/lookup-field-dual-keyboard-focus-answered-with-working-autocomplete-lookup-comp - I think I have solved all the little quirks I did not like with other solutions. If you have any issues with it let me know as not sure how the posted code translates into use outside of my environment and may need some tweaks for your specific situation – Eric Nov 08 '16 at 03:17
Thank you so much for those information. Really, really helpful. I think I should be fine with the code. I am actually a clever person:) – Lance Shi Nov 08 '16 at 03:19
@LanceShi - I just meant that - for me - it helps to know something works or I will be chasing different solutions when the original way just needed a small tweak. – Eric Nov 08 '16 at 03:22
I know. I was just joking. I just tried. It was working very well. Thank you for the solution – Lance Shi Nov 08 '16 at 03:24
@LanceShi - Shweet.....Sometimes My internet tone does not come across like it does in my mind as I am typing it so just wanted to make sure :) I swear I am laughing when I type some things but it ends up really making the recipient mad. Or maybe I just have a bad sense of humor :) – Eric Nov 08 '16 at 03:25

score 0 · Answer 2 · answered Nov 08 '16 at 02:52

Checkboxes don't behave the way you think they do. When the "checked" attribute is set, it only affects the value on load. Technically, most browsers implement it like this: if the checked attribute is on the input element, it's checked, otherwise it's not. As such, you can't really directly bind to the checked attribute, it simply won't work. Instead, you can use ui:inputCheckbox:

<ui:inputCheckbox value="{!conn.is_Active__c}" disabled="true" />

Of course, if your intent is to always have the checkbox be disabled, use ui:outputCheckbox instead.

There are ways to read this value in your controller, but simply binding to a plain input element won't work the way you expect without writing more code than just that.

How to set up the default value for checkbox in slds

2 Answers2