Return to top
On this page

Switch

Used for toggling a value between true and false.
Eg. to turn settings on or off.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Switch } from '@sigveh/basic-ui'

const notifications = ref(false)
</script>

<template>
  <Switch v-model="notifications" />
</template>

Events

input

(e: 'input', value: boolean): void

Runs everytime the value is updated.

update:modelValue

(e: 'update:modelValue', value: boolean): void

Runs everytime the value is updated. Updates the v-model value.

Demo

Medium
Small

Type definitions

ts
interface SwitchProps {
  modelValue?: boolean
  size?: 'small' | 'medium'
}

interface SwitchEvents {
  (e: 'input', value: boolean): void
  (e: 'udate:modelValue', value: boolean): void
}