<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label">Value</label>
        <div class="o-form-group__controls">
            <div class="c-checkbox-group">
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" />Checkbox
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" checked="checked" />Checkbox checked
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" disabled="disabled" />Checkbox disabled
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" disabled="disabled" checked="checked" />Checkbox disabled checked
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input id="inputIndeterminate" type="checkbox" />Checkbox indeterminate
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var input = document.getElementById("inputIndeterminate");
    input.indeterminate = true;
    input.setAttribute('data-indeterminate', true);
</script>

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label">Value</label>
        <div class="o-form-group__controls">
            <div class="c-checkbox-group c-checkbox-group--inline">
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" />Inline Value 1
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" />Inline Value 2
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" checked="checked" />Inline Value 3
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label">Value</label>
        <div class="o-form-group__controls">
            <div class="c-checkbox-group">
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" />Value 1
                    </label>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" />Value 2
                    </label>
                    <div class="c-checkbox-subgroup">
                        <div class="c-checkbox">
                            <label>
                                <input type="checkbox" checked="checked" />Subvalue 1
                            </label>
                        </div>
                        <div class="c-checkbox">
                            <label>
                                <input type="checkbox" checked="checked" />Subvalue 2
                            </label>
                        </div>
                    </div>
                </div>
                <div class="c-checkbox">
                    <label>
                        <input type="checkbox" checked="checked" />Value 3
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>