Checkboxes

Styling and variations of the a checkbox

Default

Standard Checkbox and label

HTML

<div class="t-content">
    <form class="c-generalForm" name="formApi" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <div class="c-checkbox">
                    <input type="checkbox" value="Stuff" id="IsVisible" name="IsVisible" ng-model="IsVisible">
                    <label for="IsVisible">Visible</label>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Indeterminate

A checkbox that has only some of the child elements selected

HTML

<div class="t-content" ng-controller="IndeterminateExampleController as controller">
    <form class="c-generalForm" name="formApi" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--checkbox">
                <div class="c-checkbox">
                    <input type="checkbox" value="Stuff" id="parent" inv-indeterminate="controller.indeterminate" ng-model="controller.parent" ng-change="controller.parentChanged()">
                    <label for="parent">Parent</label>
                </div>
            </div>
            <div class="u-ml++">
                <input type="checkbox" value="Stuff" id="child-1" ng-model="controller.children[0]" ng-change="controller.onChildChanged()">
                <label for="child-1">Child 1</label>
            </div>
            <div class="u-ml++">
                <input type="checkbox" value="Stuff" id="child-2" ng-model="controller.children[1]" ng-change="controller.onChildChanged()">
                <label for="child-2">Child 2</label>
            </div>
        </fieldset>
    </form>
</div>

Descriptive

A checkbox that has a bolded title with smaller sized meta information

HTML

<div class="t-content">
    <form class="c-generalForm" name="formApi" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item c-fieldset-item--checkboxDescriptive">
                <div class="c-checkbox">
                    <input type="checkbox" value="selected" id="paymentInstrument" name="paymentInstrument" ng-model="paymentInstrument.isSelected">
                    <label class="c-label-title" for="paymentInstrument">
                        MasterCard ending in 1000
                    </label>
                </div>
                <div class="c-label-meta">expires 10/20</div>
            </div>
        </fieldset>
    </form>
</div>