Check

The bb-check directive allows you to change an input element of type checkbox or radio button into a commonly styled selector. The value that is selected is driven through the ng-model attribute specified on the input element. For radio button input types, the value to set on the ng-model can be specified by the value attribute.

Accessibility

When using multiple checkboxes or radio buttons as a group, use fieldset and legend elements to provide semantic structure. These elements group the related input fields and provide the legend text with the controls in the fieldset to people using assistive technology. For more information on how to use fieldset and legend, see WebAIM examples and guidance.

Demo

Checkboxes:

Scope state:

  • {{checkBoxItem.description}}: {{checkBoxItem.checked}}
Radio buttons:

Scope state:

  • Radio button selected: {{checkCtrl.selectedRadioItem}}

Markup

<div class="row" ng-controller="CheckTestController as checkCtrl">
  <div class="col-sm-6">
    <fieldset>
      <legend>Checkboxes:</legend>
      <div ng-repeat="checkBoxItem in checkCtrl.checkBoxItems">
          <label>
              <input bb-check type="checkbox" ng-model="checkBoxItem.checked" ng-disabled="checkBoxItem.disabled">
              {{checkBoxItem.description}}
          </label>
      </div>
    </fieldset>
    <div class="m-t-sm">
      <p>Scope state:</p>
      <ul>
        <li ng-repeat="checkBoxItem in checkCtrl.checkBoxItems">
          {{checkBoxItem.description}}: <strong>{{checkBoxItem.checked}}</strong></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-6">
    <fieldset>
      <legend>Radio buttons:</legend>
      <div ng-repeat="radioItem in checkCtrl.radioItems">
          <input name="demo" bb-check type="radio" id="radio-id-{{$id}}" ng-model="checkCtrl.selectedRadioItem" ng-value="radioItem.id" ng-disabled="radioItem.disabled">
          <label for="radio-id-{{$id}}">
              {{radioItem.description}}
          </label>
      </div>
    </fieldset>
    <div class="m-t-sm">
      <p>Scope state:</p>
      <ul>
        <li>
          Radio button selected: <strong>{{checkCtrl.selectedRadioItem}}</strong>
        </li>
      </ul>
    </div>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function CheckTestController() {
        var self = this;

        self.checkBoxItems = [
            { description: 'Checkbox 1', checked: false, disabled: false },
            { description: 'Checkbox 2', checked: true, disabled: false },
            { description: 'Disabled', checked: false, disabled: true },
            { description: 'Disabled and selected', checked: true, disabled: true }
        ];

        self.radioItems = [
            { id: 1, description: 'Option 1', disabled: false },
            { id: 2, description: 'Option 2', disabled: false },
            { id: 3, description: 'Option 3', disabled: false },
            { id: 4, description: 'Disabled', disabled: true }
        ];

        self.selectedRadioItem = self.radioItems[1].id;
    }

    angular.module('stache')
        .controller('CheckTestController', CheckTestController);
}());