<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': disable() || !enable() }">
	<div class="sub-checkbox-container" role="checkbox">
		<div class="sub-checkbox" data-bind="css: {'checked': (value() && !inverted) || (!value() && inverted),
			'unchecked': (!value() && !inverted) || (value() && inverted),
			'box': animationBox, 'checkmark': animationCheckmark}"></div>
	</div>
<!-- ko if: labeled -->
	<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}, css: {'i18n-animation': labelAnimated}"></span>
<!-- /ko -->
</span>