Svelte Toggle (Switch) - 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.

Setup #

Svelte
<script>
  import { Toggle } from 'flowbite-svelte';
</script>

Toggle examples #

Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-2"><label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600">  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Toggle me</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked>  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Checked toggle</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-not-allowed grayscale contrast-50 text-gray-400"><input type="checkbox" value="" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600">  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Disabled toggle</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-not-allowed grayscale contrast-50 text-gray-400"><input type="checkbox" value="" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked>  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Disabled checked</label>   </div>
Svelte
<Toggle>Toggle me</Toggle>
<Toggle checked={true}>Checked toggle</Toggle>
<Toggle disabled>Disabled toggle</Toggle>
<Toggle checked disabled>Disabled checked</Toggle>

Colors #

   Red       Green       Purple       Yellow       Teal       Orange   
Svelte
<Toggle color="red" checked>Red</Toggle>
<Toggle color="green" checked>Green</Toggle>
<Toggle color="purple" checked>Purple</Toggle>
<Toggle color="yellow" checked>Yellow</Toggle>
<Toggle color="teal" checked>Teal</Toggle>
<Toggle color="orange" checked>Orange</Toggle>

Sizes #

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-2"><label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600">  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4 relative"></span> Small toggle</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked>  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Default toggle</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked>  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6 relative"></span> Large toggle</label>    <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600">  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-16 h-10 after:top-1 after:left-[4px] after:h-8 after:w-8 relative"></span> Custom toggle</label>   </div>
Svelte
<script>
  import { Toggle } from 'flowbite-svelte';
  const customSize = 'w-16 h-10 after:top-1 after:left-[4px]  after:h-8 after:w-8';
</script>

<Toggle size="small">Small toggle</Toggle>
<Toggle size="default" checked>Default toggle</Toggle>
<Toggle size="large" checked>Large toggle</Toggle>
<Toggle size="custom" {customSize}>Custom toggle</Toggle>

Label for off state #

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-2"><label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> dark mode <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all ms-3 dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> light mode</label>   </div>
Svelte
<script>
  import { Toggle } from 'flowbite-svelte';
</script>

<Toggle>
  <svelte:fragment slot="offLabel">dark mode</svelte:fragment>
  light mode
</Toggle>

Disabled #

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-2"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg w-48">Disabled: False</button>  <label class="text-sm rtl:text-right font-medium dark:text-gray-300 flex items-center cursor-pointer text-gray-900 mt-3"><input type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600">  <span class="me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-700 dark:border-gray-600 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600 w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5 relative"></span> Disabled: false</label>   </div>
Svelte
<script lang="ts">
  import { Input, Label, Button, Toggle } from 'flowbite-svelte';
  let isDisabled = false;
  let checked: boolean;
  const handleClick = () => {
    isDisabled = !isDisabled;
  }
</script>

<Button class="w-48" on:click={handleClick}>Disabled: {isDisabled ? 'True' : 'False'}</Button>

<Toggle class="mt-3" bind:checked disabled={isDisabled}>Disabled: {isDisabled}</Toggle>

Component data #

The component has the following props, type, and default values. See types page for type information.