directus/docs/reference/app/components/v-switch.md

Switch

Render a switch that either can model a single boolean value or model an array in combination with the value prop.

<v-switch v-model="checked" label="Receive newsletter" />

Colors

Color changes are done using the css variable --v-switch-color.

<v-switch v-model="checked" />
<style>
	.v-switch {
		--v-switch-color: var(--red);
	}
</style>

Boolean vs arrays

Just as with regular checkboxes, you can use v-model with both an array and a boolean:

<template>
	<v-switch v-model="withBoolean" />

	<v-switch v-model="withArray" value="red" />
	<v-switch v-model="withArray" value="blue" />
	<v-switch v-model="withArray" value="green" />
</template>

<script>
	export default {
		data() {
			return {
				withBoolean: false,
				withArray: ['red', 'green'],
			};
		},
	};
</script>

Keep in mind to pass the value prop with a unique value when using arrays in v-model.

Reference

Props

Prop	Description	Default	Type
value	If modeling an array, what value the switch represents	null	String
input-value	Model the selected state using v-model	false	[Boolean, Array]
disabled	Disables the switch	false	Boolean
label	Displays a label next to the switch	null	String

CSS Variables

Variable	Default
--v-switch-color	var(--foreground-normal)

Events

Event	Description	Value
change	When the state of the switch changes

Slots

Slot	Description	Data
label	Alternative way of adding a label to the switch