Usage
Use a v-model to make the Toggle reactive.
<script setup>
const selected = ref(false)
</script>
<template>
<UToggle v-model="selected" />
</template>Style
Use the color prop to change the style of the Toggle.
<UToggle color="primary" />Icon
Use any icon from Iconify by setting the on-icon and off-icon props by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.toggle.default.onIcon and ui.toggle.default.offIcon.
<UToggle on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />Disabled
Use the disabled prop to disable the Toggle.
<UToggle disabled />Props
name
string
null
ui
any
undefined
id
string
null
color
any
config.default.color
offIcon
string
config.default.offIcon
disabled
boolean
false
modelValue
boolean
false
Preset
appConfig.ui.toggle
undefined