component(
ref="formEl"
:is="formRegister && !wCheckboxes ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue: isChecked, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
v-model:valid="valid"
@reset="$emit('update:modelValue', isChecked = null);$emit('input', null)"
:class="classes")
input(
ref="input"
:id="inputId"
type="checkbox"
:name="inputName"
:checked="isChecked || null"
:disabled="isDisabled || isReadonly || null"
:required="required || null"
:tabindex="tabindex || null"
@focus="$emit('focus', $event)"
@blur="$emit('blur', $event)"
@change="onInput() /* Edge doesn't emit an `input` event on checkbox/radio/select change */"
@keypress.enter="onInput"
:aria-checked="isChecked || 'false'"
role="checkbox")
template(v-if="hasLabel && labelOnLeft")
label.w-checkbox__label.w-form-el-shakable.pr2(
v-if="$slots.default"
:for="inputId"
:class="labelClasses")
slot {{ label }}
label.w-checkbox__label.w-form-el-shakable.pr2(
v-else-if="label"
:for="inputId"
:class="labelClasses"
v-html="label")
.w-checkbox__input(@click="$refs.input.focus();$refs.input.click()" :class="this.color")
svg(viewBox="-0.5 0 12 10")
polyline(points="1 5 4 8 10 2")
template(v-if="hasLabel && !labelOnLeft")
label.w-checkbox__label.w-form-el-shakable.pl2(
v-if="$slots.default"
:for="inputId"
:class="labelClasses")
slot {{ label }}
label.w-checkbox__label.w-form-el-shakable.pl2(
v-else-if="label"
:for="inputId"
:class="labelClasses"
v-html="label")