flowbite-vue/docs/components/toggle.md

<script setup> import FwbToggleExample from './toggle/examples/FwbToggleExample.vue' import FwbToggleExampleChecked from './toggle/examples/FwbToggleExampleChecked.vue' import FwbToggleExampleColors from './toggle/examples/FwbToggleExampleColors.vue' import FwbToggleExampleDisabled from './toggle/examples/FwbToggleExampleDisabled.vue' import FwbToggleExampleSize from './toggle/examples/FwbToggleExampleSize.vue' </script>

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

---

:::tip Original reference: https://flowbite.com/docs/forms/toggle/ :::

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 <script setup> import { ref } from 'vue' import { FwbToggle } from 'flowbite-vue' const toggle = ref(false) </script>

## Checked toggle

<fwb-toggle-example-checked />
```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 <script setup> import { ref } from 'vue' import { FwbToggle } from 'flowbite' const toggle = ref(false) </script>

## Colors

<fwb-toggle-example-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 <script setup> import { FwbToggle } from 'flowbite-vue' </script>