Checkbox
Use checkboxes for multiple choice lists or properties or true/false properties of an event. Different color presets are available.
Demo
<label>
<input mbsc-checkbox data-label="Option 1" data-description="Checked checkbox" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Option 2" data-description="Empty checkbox" type="checkbox" />
</label>
<label>
<input mbsc-checkbox data-label="Option 3" data-description="Disabled checkbox" type="checkbox" disabled />
</label>
<label>
<input mbsc-checkbox data-label="Option 4" data-description="Disabled and checked checkbox" type="checkbox" checked disabled />
</label>
<label>
<input mbsc-checkbox data-label="Primary" data-color="primary" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Secondary" data-color="secondary" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Success" data-color="success" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Danger" data-color="danger" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Warning" data-color="warning" type="checkbox" checked />
</label>
<label>
<input mbsc-checkbox data-label="Info" data-color="info" type="checkbox" checked />
</label>
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
<label> <input id="chboxDeductFromStore" mbsc-switch data-label="Deduct Product/Consumable From Store" data-description="Remove the Product/Consumable from your store by work order product" type="checkbox" checked /></label>
<!--<div class="mbsc-form-group">-->
<!-- <div class="mbsc-form-group-title">Checkbox</div>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Option 1" data-description="Checked checkbox" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Option 2" data-description="Empty checkbox" type="checkbox" />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Option 3" data-description="Disabled checkbox" type="checkbox" disabled />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Option 4" data-description="Disabled and checked checkbox" type="checkbox" checked disabled />-->
<!-- </label>-->
<!--</div>-->
<!--<div class="mbsc-form-group">-->
<!-- <div class="mbsc-form-group-title">Checkbox colors</div>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Primary" data-color="primary" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Secondary" data-color="secondary" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Success" data-color="success" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Danger" data-color="danger" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Warning" data-color="warning" type="checkbox" checked />-->
<!-- </label>-->
<!-- <label>-->
<!-- <input mbsc-checkbox data-label="Info" data-color="info" type="checkbox" checked />-->
<!-- </label>-->
<!--</div>-->