ToggleSwitch
A checkbox input styled to look like a sliding on/off switch.
Current styles support a single toggle switch with or without a label. The case for not including a label is if the label is added and connected with the input via the for attribute elsewhere (like a future Field component). If you're just using this component by itself, you should include a label.
v-model value will be boolean.
Demos
Default
<template>
<div>
<p>Toggle switch value: {{ switchValue }}</p>
<wvui-toggle-switch
v-model="switchValue"
name="single-switch"
input-value="single-switch"
@update:model-value="onUpdate"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import WvuiToggleSwitch from '../ToggleSwitch.vue';
export default defineComponent( {
name: 'SingleSwitch',
components: { WvuiToggleSwitch },
setup() {
const switchValue = ref( false );
const onUpdate = ( value: string ): void => {
console.log( 'update:modelValue event: ' + value );
};
return {
switchValue,
onUpdate
};
}
} );
</script>
<style scoped>
p {
font-weight: bold;
margin-top: 0;
}
</style>
With label
<template>
<div>
<wvui-toggle-switch
v-model="switchValue"
name="single-switch-with-label"
input-value="single-switch-with-label"
@update:model-value="onUpdate"
>
Show details
</wvui-toggle-switch>
<p v-show="switchValue">
Here are the details
</p>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import WvuiToggleSwitch from '../ToggleSwitch.vue';
export default defineComponent( {
name: 'SingleSwitchWithLabel',
components: { WvuiToggleSwitch },
setup() {
const switchValue = ref( false );
const onUpdate = ( value: string ): void => {
console.log( 'update:modelValue event: ' + value );
};
return {
switchValue,
onUpdate
};
}
} );
</script>
Disabled, off
Disabled, on
Disabled, with label
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|
| modelValue | Value provided by v-model in a parent component.
Rather than directly binding a value prop to this component, use
v-model on this component in the parent component. | modelValueProp | - | |
| inputValue | HTML "value" attribute to assign to the input.
Required for input groups. | string|number|boolean | - | false |
| disabled | Whether the disabled attribute should be added to the input. | boolean | - | |
Events
| Event name | Properties | Description |
|---|
| update:modelValue | | |
Slots
| Name | Description | Bindings |
|---|
| default | Input label content | |