Skip to content

Toggle

A boolean switch built on reka-ui.

Examples

Basic

vue
<script setup>
import { ref } from "vue";
const enabled = ref(false);
</script>

<Toggle v-model="enabled" label="Enable vaccination" />

With hint

vue
<Toggle
  v-model="enabled"
  label="Enable isolation"
  hint="Whether symptomatic individuals are isolated"
/>

Disabled

vue
<Toggle v-model="value" label="Locked setting" :disabled="true" />

Model

NameType
v-modelboolean

Props

PropTypeRequiredDefault
labelstringYes
hintstringNo
disabledbooleanNo