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 #
<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.
<Toggle>Toggle me</Toggle> <Toggle checked={true}>Checked toggle</Toggle> <Toggle disabled>Disabled toggle</Toggle> <Toggle checked disabled>Disabled checked</Toggle>
Colors #
<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 #
<Toggle size="small">Small toggle</Toggle> <Toggle size="default" checked>Default toggle</Toggle> <Toggle size="large" checked>Large toggle</Toggle>
Props #
The component has the following props, type, and default values. See types page for type information.
Toggle
Name | Type | Default |
---|---|---|
size | 'small' | 'default' | 'large' | 'default' |
group | string[] | [] |
value | string | '' |
checked | boolean | undefined |
Forwarded Events #
on:change
on:click