Switch toggle

This component is a Vue version of Switch and the functionality found in its JS file (components.switch.js). The main difference is that this one doesn't require jQuery at all.

Live example

My label

My label

Second label

Important

The preview above is not rendered in isolation from the theme of this documentation which means that some styling inheritance from it may occur. For a neutral, UI framework-only look, please see the HTML preview of each CSS component in use.

Usage

With label

<switch-toggle v-model="myRef1" :label="`My label`" />

With second label

<switch-toggle v-model="myRef2" :label="`My label`">Second label</switch-toggle>

Component source

<script setup>
import { useId } from 'vue'

const model = defineModel();
const props = defineProps({
    label: {
        type: String,
        required: true
    }
});
const id = useId();
</script>

<template>
    <div class="c-switch">
        <label :for="id" class="c-switch__state" :class="model ? 'c-switch__state--active' : 'c-switch__state--inactive'">{{ props.label }}</label>
        <span class="c-switch__button" :class="model ? 'c-switch__button--active' : 'c-switch__button--inactive'">
            <input type="checkbox" :id="id" v-model="model" aria-role="switch">
        </span>
    </div>
    <label v-if="$slots.default" :for="id" class="c-label"><slot></slot></label>
</template>