Switch
Use a Switch when you want a user to easily toggle between two mutually exclusive options, like 'on' and 'off' typically for settings or preferences within an application.
The label attribute adds a label to the Switch.
If a visible label can’t be used, provide one using the
aria-labelattribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.
<script setup lang="ts">import { VSwitch } from '@vonage/vivid-api-vue';</script>
<template> <VSwitch label="Email notifications" /></template><vwc-switch label="Email notifications"></vwc-switch>The checked attribute controls the checked state of the Switch.
<script setup lang="ts">import { VSwitch } from '@vonage/vivid-api-vue';</script>
<template> <VSwitch checked label="Email notifications" /></template><vwc-switch checked label="Email notifications"></vwc-switch>The connotation attribute controls the color of the switch.
<script setup lang="ts">import { VSwitch, VLayout } from '@vonage/vivid-api-vue';</script>
<template> <VLayout gutters="small" row-spacing="small" column-basis="block"> <VSwitch connotation="primary" label="Primary" checked /> <VSwitch connotation="cta" label="CTA" checked /> <VSwitch connotation="announcement" label="Announcement" checked /> <VSwitch connotation="success" label="Success" checked /> <VSwitch connotation="alert" label="Alert" checked /> </VLayout></template><vwc-layout gutters="small" row-spacing="small" column-basis="block"> <vwc-switch connotation="primary" label="Primary" checked></vwc-switch> <vwc-switch connotation="cta" label="CTA" checked></vwc-switch> <vwc-switch connotation="announcement" label="Announcement" checked></vwc-switch> <vwc-switch connotation="success" label="Success" checked></vwc-switch> <vwc-switch connotation="alert" label="Alert" checked></vwc-switch></vwc-layout>The disabled attribute sets the disabled state of the Switch.
<script setup lang="ts">import { VSwitch, VLayout } from '@vonage/vivid-api-vue';</script>
<template> <VLayout gutters="small" row-spacing="small" column-basis="block"> <VSwitch disabled label="Email notifications off" /> <VSwitch disabled checked label="Email notifications on" /> </VLayout></template><vwc-layout gutters="small" row-spacing="small" column-basis="block"> <vwc-switch disabled label="Email notifications off"></vwc-switch> <vwc-switch disabled checked label="Email notifications on"></vwc-switch></vwc-layout>The readonly attribute sets the readonly state of the Switch.
<script setup lang="ts">import { VSwitch, VLayout } from '@vonage/vivid-api-vue';</script>
<template> <VLayout gutters="small" row-spacing="small" column-basis="block"> <VSwitch readonly label="Email notifications off" /> <VSwitch readonly checked label="Email notifications on" /> </VLayout></template><vwc-layout gutters="small" row-spacing="small" column-basis="block"> <vwc-switch readonly label="Email notifications off"></vwc-switch> <vwc-switch readonly checked label="Email notifications on"></vwc-switch></vwc-layout>