Skip to content

Vue Toggle - Flowbite

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors


The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.

Default toggle

vue
<template>
  <fwb-toggle v-model="toggle" label="Toggle me" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbToggle } from 'flowbite-vue'

const toggle = ref(false)
</script>

Checked toggle

vue
<template>
  <fwb-toggle v-model="toggle" label="Toggle me" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbToggle } from 'flowbite-vue'

const toggle = ref(true)
</script>

Disabled toggle

vue
<template>
  <fwb-toggle v-model="toggle" disabled label="Can't Toggle me" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbToggle } from 'flowbite'

const toggle = ref(false)
</script>

Colors

vue
<template>
  <fwb-toggle label="Red" color="red" />
  <fwb-toggle label="Green" color="green" />
  <fwb-toggle label="Purple" color="purple" />
  <fwb-toggle label="Yellow" color="yellow" />
  <fwb-toggle label="Teal" color="teal" />
  <fwb-toggle label="Orange" color="orange" />
</template>

Size

vue
<template>
  <fwb-toggle label="Small" size="sm" />
  <fwb-toggle label="Medium" size="md" />
  <fwb-toggle label="Large" size="lg" />
</template>

<script setup>
import { FwbToggle } from 'flowbite-vue'
</script>

Released under the MIT License.