Toggle - Flowbite Vue

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

---

Toggle - Flowbite

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

Use FwbToggle with v-model to bind a boolean value and label to display accessible text beside the switch.

Toggle me

<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

Initialize v-model with true to render the toggle in its checked (on) state by default.

Toggle me

<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

Add the disabled prop to prevent the user from interacting with the toggle.

Can't Toggle me

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

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

const toggle = ref(false)
</script>

Colors

Use the color prop to set the accent color of the track when the toggle is checked.

Red

Green

Purple

Yellow

Teal

Orange

<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

Use the size prop to control the size of the toggle track and thumb.

Small

Medium

Large

Extra Large

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

Label Position

Add the reverse prop to place the label text to the left of the toggle instead of the right.

Toggle me

Toggle me

<template>
  <fwb-toggle label="Toggle me" />
  <fwb-toggle label="Toggle me" reverse />
</template>

Validation

Use validationStatus together with the validationMessage slot (rich content) or the validationMessage prop (plain string) to show success or error feedback below the toggle. The slot takes priority when both are given.

Notifications (success)

Great! Notifications are enabled.

Location (error)

Required! Location access must be enabled.

<template>
  <fwb-toggle v-model="toggle1" label="Notifications (success)" validation-status="success">
    <template #validationMessage>
      <span class="font-medium">Great!</span> Notifications are enabled.
    </template>
  </fwb-toggle>
  <fwb-toggle
    v-model="toggle2"
    label="Location (error)"
    validation-message="Required! Location access must be enabled."
    validation-status="error"
  />
</template>

Helper Text

Use the helper slot to show a hint below the toggle.

Dark mode

Switches the interface between light and dark themes.

<template>
  <fwb-toggle v-model="toggle" label="Dark mode">
    <template #helper>
      Switches the interface between light and dark themes.
    </template>
  </fwb-toggle>
</template>

Styling

Use dedicated props to pass classes to individual elements.

Enable feature

<template>
  <fwb-toggle
    v-model="toggle"
    label="Enable feature"
    class="bg-amber-200 dark:bg-green-900 peer-checked:bg-amber-600 dark:peer-checked:bg-green-500 peer-focus:ring-amber-300 dark:peer-focus:ring-green-800"
    label-class="font-bold text-amber-900 dark:text-green-200"
    wrapper-class="border-2 border-amber-700 dark:border-green-400 bg-amber-300 dark:bg-green-800 rounded-lg p-3"
  />
</template>

Toggle component API

FwbToggle Props

Native attribute passthrough

FwbToggle sets inheritAttrs: false and forwards all extra attributes (e.g. name, form, aria-label) directly to the <input type="checkbox"> element.

Name	Type	Default	Description
class	String | Object	''	Added to the toggle background element.
color	String	''	Accent color when checked: red, green, purple, yellow, teal, orange.
disabled	Boolean	false	Disables the toggle.
label	String	''	Label text rendered next to the toggle. When empty, no text is rendered.
labelClass	String | Object	''	Added to the label text element.
modelValue	Boolean	false	The current value (use with v-model).
reverse	Boolean	false	Places the label text to the left of the toggle.
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Controls the size of the toggle track and thumb.
validationMessage	String	undefined	Validation feedback text; fallback for the validationMessage slot.
validationStatus	'success' | 'error'	undefined	Applies success or error colour styles to the label text.
wrapperClass	String | Object	''	Added to the outer root <div>.

Accessibility

aria-invalid="true" is set automatically on the native checkbox when validationStatus="error". aria-describedby is wired to the IDs of any rendered validationMessage (slot or prop) and helper slots, and is merged with any aria-describedby value you pass as an attribute. When no label prop is provided, pass aria-label as an attribute to maintain an accessible name — it is forwarded directly to the <input>.

FwbToggle Slots

Name	Description
helper	Helper text rendered below the toggle.
validationMessage	Validation feedback rendered below the toggle (styled by validationStatus). Takes priority over the validationMessage prop.