Switch tile

This component uses Switch toggle together with the corresponding CSS components (Switch and Tile).

Live example

My label

My label

My label

Some extra description about the setting goes here

My 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

Only label

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

With description

<switch-tile v-model="myRef2" :label="`My label`">
    Some extra description about the setting goes here
</switch-tile>

Component source

<script setup>
import SwitchToggle from "./SwitchToggle.vue";

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

<template>
    <div class="c-tile">
        <div class="c-tile__head">
            <h3 class="c-tile__title u-font--medium">{{ props.label }}</h3>
            <slot></slot>
        </div>
        <div class="c-tile__body">
            <switch-toggle v-model="model" :label="props.label" />
        </div>
    </div>
</template>