ons-checkbox not appearing

[wetfeet]

I started an empty test project (Onsen UI V2 Angular 1 Minimum) and my code looks like this:

<ons-page ng-controller="AppController as page">
    <ons-toolbar>
      <div class="center">Introduction</div>
    </ons-toolbar>
    <ons-list>
      <ons-list-item tappable>
        <label class="left">
          <ons-checkbox input-id="check-2" ng-model="page.bananas"></ons-checkbox>
        </label>
        <label for="check-2" class="center">Bananas</label>
        <label class="right">
          <ons-switch input-id="check-2" ng-model="page.bananas"></ons-checkbox>
        </label>
      </ons-list-item>
    </ons-list>
  </ons-page>

Nothing fanciful. Just a list within a ons-page with 3 columns: left, center and right.

On the left, a ons-checkbox.
In the center, a caption label static text.
On the right, a ons-switch.

Now when I monaca preview, the ons-checkbox doesn’t appear, for both iOS and Material design. The ons-switch however, does.

What am I missing?

[misterjunio]

@wetfeet ons-checkbox syntax was introduced in version 2.4.0 version of Onsen UI. You are most likely using an older version and probably getting errors in your console. Can you check if that’s the case?

[wetfeet]

@misterjunio I fiddled around a little using codes from the ons-checkbox reference so the page appears a little different. Still no luck.

No error in console.

I did a monaca version. It says: 2.2.1. (meaning Onsen version 2.2.1 is installed? Or the monaca version?)

monaca info as below:

Node version: v6.10.2
Cordova version: 5.4.1

[wetfeet]

Oh wait a minute. I checked the package.json inside the www/lib/onsenui/package.json

"name": "onsenui",
"version": "2.3.2"

Seems to me the template bundles 2.3.2 by default?

[misterjunio]

@wetfeet that 2.2.1 is just the Monaca CLI version you’re using. For the Onsen UI one on that project you can check www/lib/onsenui/package.json. In any case I just tried and even the latest CLI version only fetches 2.3.2 so the templates are not updated yet. If you really want to use Onsen UI 2.4.0 with Monaca you can either wait for the update or change your index.html file’s head to fetch from CDN. Or you can also download the 2.4.0 version and add it to the lib instead of the current one.

[misterjunio]

@wetfeet exactly, so you need to bypass that into the current version if you want. Or else just keep the <ons-input type="checkbox"> syntax if it’s not bothersome for that one project.

[wetfeet]

@misterjunio OK Thank you for confirming.

Originally, I thought ons-checkbox is an old feature that has always been there, since it is already advertised and demoed on the tutorial docs. Didn’t know it is so new.

[misterjunio]

@wetfeet we update them to always reflect the most current version but from our CHANGELOG you can see that component was only newly branched from the <ons-input> one. Thanks for reporting anyway :+1: