component(
ref="formEl"
:is="formRegister ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue: isOn, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
v-model:valid="valid"
@mouseenter="$emit('mouseenter', $event)"
@mouseleave="$emit('mouseleave', $event)"
@reset="$emit('update:modelValue', isOn = null);$emit('input', null)"
:class="classes"
:style="$attrs.style")
input(
ref="input"
:id="inputId"
type="checkbox"
:name="inputName"
:checked="isOn"
:disabled="isDisabled || isReadonly || null"
:readonly="isReadonly || null"
:aria-readonly="isReadonly ? 'true' : 'false'"
:required="required || null"
:tabindex="tabindex || null"
v-bind="attrs"
@change="onInput() /* Edge doesn't fire input on checkbox/radio/select change */"
@focus="$emit('focus', $event)"
@blur="$emit('blur', $event)"
:aria-checked="isOn || 'false'"
role="switch")
template(v-if="hasLabel && labelOnLeft")
label.w-switch__label.w-switch__label--left.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}
.w-switch__input(
@click="$refs.input.focus();$refs.input.click()"
:class="inputClasses")
.w-switch__track(v-if="$slots.track")
slot(name="track")
.w-switch__thumb
.w-switch__thumb-content
w-progress(
v-if="loading"
circle
color="inherit"
v-bind="typeof loading === 'number' && { 'model-value': loading }")
slot(v-else-if="$slots.thumb" name="thumb")
template(v-if="hasLabel && !labelOnLeft")
label.w-switch__label.w-switch__label--right.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}