0

How can we apply slds to <ui:inputcheckbox>.I tried using <ui:inputcheckbox class="slds-checkbox" value=""/> but no hits.I want to style the checkbox as of SLDS. Also i am using other way around <lightning:input type="checkbox"/> which is styled as SLDS by default but i think due to beta version it is giving me following error.

This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 1853269181-216614 (1023342491)

Deepak Agarwal
  • 526
  • 2
  • 15
  • 39
  • 1
    Can you post the exact markup you tried to use for <lightning:input type="checkbox" />? We are using that component extensively without issues. – dsharrison Jun 16 '17 at 14:19
  • Just instead of using ui:inputcheckbox i was using <lightning:input type="checkbox" click="{!c.Change}"/> which returns me the error i posted. – Deepak Agarwal Jun 19 '17 at 09:12
  • If that is true, then you were missing required attributes. See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_input.htm – dsharrison Jun 19 '17 at 14:37

2 Answers2

1

Sometime you'll see that error when you are missing attributes. lightning:input requires name and label. Try:

<lightning:input type="checkbox" name="check1" label="Check Please" />

If you don't want a label, Summer '17 added a no label variant:

<lightning:input type="checkbox" name="check1" label="Check Please" variant="label-hidden" />
wellmstein
  • 1,821
  • 1
  • 15
  • 23
0

For applying SLDS styling try the following code with ui:inputCheckbox:

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <label class="slds-checkbox">
            <ui:inputCheckbox value="" />
            <span class="slds-checkbox--faux" />
            <span class="slds-form-element__label">Checkbox</span>
        </label>
    </div>
    </div>

It will work for sure. If this helps mark it as best answer.

Nikhil Chowdhury
  • 39
  • 4