angular-material-npfixed/src/components/checkbox/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" class="md-padding" ng-cloak>
  <div>
    <fieldset class="standard">
      <legend>Using &lt;ng-model&gt;</legend>
      <div layout-wrap layout-gt-sm="row" >
        <div flex-gt-sm="50">
          <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
            Checkbox 1: {{ data.cb1 }}
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <div>
            <md-checkbox
              ng-model="data.cb2"
              aria-label="Checkbox 2"
              ng-true-value="'yup'"
              ng-false-value="'nope'"
              class="md-warn md-align-top-left" flex>
            Checkbox 2 (md-warn)  <br/>
            <span class="ipsum">
              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
              sit amet dapibus tortor ligula non nibh.
            </span>
            <br/>
            {{ data.cb2 }}
          </md-checkbox>
          </div>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
            Checkbox: Disabled
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
            Checkbox: Disabled, Checked
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
            Checkbox (md-primary): No Ink
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate
              aria-label="Checkbox Indeterminate" class="md-primary">
            Checkbox: Indeterminate
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate aria-label="Checkbox Disabled Indeterminate"
              ng-disabled="true" class="md-primary">
            Checkbox: Disabled, Indeterminate
          </md-checkbox>
        </div>
      </div>
    </fieldset>

  </div>
</div>