Checkbox inputs and value attributes


Why is it that ember refuses to let me set a value for a checkbox?

I have a list of options that need to allow for selection, but when I try to use the following snippet embers throws an exception.

{{#each c in classes}}
    {{input type="checkbox" name="selectedClasses[]"}}


Uncaught Error: Assertion Failed: {{input type='checkbox'}} does not support setting `value=someBooleanValue`; you must use `checked=someBooleanValue` instead. 

Is there a better way to do this with Ember?


Yes, as the error says use checked not value:

{{input type="checkbox" name="selectedClasses[]"}}


That is what the error message says, but I am trying to set the value associated with the checkbox, not the checked status.


This looks like it could be a bug.

from MDN regarding the value attribute: The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.

I looked through the checkbox helper and didn’t see an attributeBinding for value. As I understand it, this attribute should be present for the checkbox input to represent a value. Am I missing something that ember is doing in the background?


No change about ‘value’ attribute ? I use Ember 2.4.3 and this error is always here :disappointed:


You don’t really need the input helper at this point, you can use the native input elements.

  onchange={{action 'handleCheckboxChange' value='target.checked'}}


But this solution is only one-way binding on booleanValue CP (checked attribute). We must manage booleanValue in handleCheckboxChange too…


You’ll always need to manage checked/value in some way either via a CP or inline helper (recommend you look at ember-truth-helpers if you haven’t already). The example was just demonstrating using the native element. If you want to do two-way data binding you can – though I usually don’t to keep aligned with DDAU and to reduce future travelers from using observers to capture changes.

  onchange={{action (mut checked) value='target.checked'}}

Two-way bound:,js,output

I’m a little unclear on the use of value here, are you doing a form POST? If not, I believe you can just rely on checked either as a computed property or an inlined helper. Otherwise, I’m curious to know your use case for value.


I know I am a late comer in this discussion, but I have been studying this issue and have found the following solution that some may find helpful. I wanted to find a solution that used the native Ember input helper for a checkbox {{input type=checkbox }} that could call an action that could manipulate values or class names or whatever else I fancied. I discovered as Chris did that you can not use ‘value=variable’ with the input helper. I also had no luck using action=“someAction” on=“click”. I tried many varieties of the action call but none worked. So finally this is what I came up with that achieved everything I wanted. As you can see it does not call an action but rather in the component controller it defines a variable to hold the boolean value for “checked”, and a method outside of the regular actions feature that simply observes the checked variable so that it fires whenever a change occurs which in this case is whenever the checkbox is clicked. I offer this because I has to look so hard and so long for a solution. I hope it helps those who are also looking for a solution. Peace. (Have no idea how you guys formatted your code with such a limited text editor :slight_smile: )

In Component template hbs:

{{input type="checkbox" checked=myVal }}

In Component Controller js file:

myVal: false,

toggleCheckbox: function() {

 //change values or classes or whatever else you wish to do



In case it’s of any help, you should be able to use the {{input}} helper and avoid 2-way data binding and observers, via something like (where model is any object the input form is supposed to be manipulating):

// template.hbs
{{input type="checkbox" checked=(readonly model.isChecked) click=(action 'checkboxClicked' model)}}

// component.js
actions: {
  checkboxClicked(model) {
    // do all the other things