Toggle Components

Examples

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

let props = {
  name: 'toggle-example',
  id: 'toggle-example',
  label: 'Toggle me',
  value:'toggle'
};
let props2 = {
  name: 'toggle-example-checked',
  id: 'toggle-example-checked',
  label: 'Checked toggle',
  checked: true,
  value:'toggle'
};
let props3 = {
  name: 'toggle-example-disabled',
  id: 'toggle-example-disabled',
  label: 'Disabled toggle',
  disabled: true,
  value:'toggle'
};
let props4 = {
  name: 'toggle-example-disabled',
  id: 'toggle-example-disabled',
  label: 'Disabled checked',
  checked: true,
  disabled: true,
  value:'toggle'
};
</script>

<Toggle {...props}/>

<Toggle {...props2}/>

<Toggle {...props3}/>

<Toggle {...props4}/>

Colors

<Toggle color="red" value='red-toggle' name="red-toggle" id="red-toggle" label="Red" checked/>

<Toggle color="green" value='green-toggle' name="green-toggle" id="green-toggle" label="Green" checked/>

<Toggle color="purple" value='purple-toggle' name="purple-toggle" id="purple-toggle" label="Purple" checked/>

<Toggle color="yellow" value='yellow-toggle' name="yellow-toggle" id="yellow-toggle" label="Yellow" checked/>

<Toggle color="teal" value='teal-toggle' name="teal-toggle" id="teal-toggle" label="Teal" checked/>

<Toggle color="orange" value='orange-toggle' name="orange-toggle" id="orange-toggle" label="Orange" checked/>

Sizes

<Toggle size="small" value='small-toggle' name="small-toggle" id="small-toggle" label="Small toggle" checked/>

<Toggle value='default-toggle' name="default-toggle" id="default-toggle" label="Default toggle" checked/>

<Toggle size="large" value='large-toggle' name="large-toggle" id="large-toggle" label="Large toggle" checked/>

Props

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

Related components

Checkbox

File input

Floating label

Input

Radio

Range

Search

Select

Textarea

Toggle

References

Flowbite Forms