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.

  • Svelte
<Toggle>Toggle me</Toggle>
<Toggle checked={true}>Checked toggle</Toggle>
<Toggle disabled>Disabled toggle</Toggle>
<Toggle checked disabled>Disabled checked</Toggle>

Colors #

  • 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 #

  • 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>

Props #

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

Toggle #

  • Use the class prop to overwrite the span and the Checkbox component.
Name Type Default
size 'small' | 'default' | 'large' | 'custom' 'default'
group (string | number)[] []
value string | number ''
checked boolean | undefined undefined
customSize string ''

Forwarded Events #

on:change
on:click

References #

Textarea