Personizely UI

Appearance

Switch ​

Renders an accessible switch element.

Examples ​

Basic switch ​

Code

vue
<template>
  <Switch v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Switch } from '@/components/ui/switch'

const value = ref(false)
</script>

Switch with a label ​

Code

vue
<template>
  <Switch v-model="value" label="This is a label" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Switch } from '@/components/ui/switch'

const value = ref(false)
</script>

Disabled switch ​

Code

vue
<template>
  <Switch v-model="value" label="This is a label" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Switch } from '@/components/ui/switch'

const value = ref(false)
</script>