Toggle Svelte Component

Toggle Components
Toggle Props
Examples

Toggle Components

There are following components included:

Toggle

Toggle Props

Name	Type	Default	Description
checked	boolean	false	Defines whether the toggle input is checked or not
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	string	'bg-primary'
colors.checkedBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	string	'bg-white'
colors.checkedThumbBgMaterial	string	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	string	'bg-white'
colors.thumbBgMaterial	string	'bg-md-light-outline dark:bg-md-dark-outline'
disabled	boolean	false	Defines whether the toggle input is disabled or not
name	string		Toggle input name
readonly	boolean	false	Defines whether the toggle input is readonly or not
touchRipple	boolean	true	Enables touch ripple effect in Material theme
value	any		Toggle input value
onChange	function(e)		Toggle input `change` event handler

Examples

Toggle.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    List,
    ListItem,
    Toggle,
  } from 'konsta/svelte';

  let checked1 = true;
  let checked2 = true;
  let checked3 = true;
  let checked4 = true;
</script>

<Page>
  <Navbar title="Toggle" />

  <List strong inset>
    <ListItem label title="Item 1">
      <Toggle
        slot="after"
        component="div"
        class="-my-1"
        checked={checked1}
        onChange={() => (checked1 = !checked1)}
      />
    </ListItem>
    <ListItem label title="Item 2">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-red"
        checked={checked2}
        onChange={() => (checked2 = !checked2)}
      />
    </ListItem>
    <ListItem label title="Item 3">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-green"
        checked={checked3}
        onChange={() => (checked3 = !checked3)}
      />
    </ListItem>
    <ListItem label title="Item 4">
      <Toggle
        slot="after"
        component="div"
        class="-my-1 k-color-brand-yellow"
        checked={checked4}
        onChange={() => (checked4 = !checked4)}
      />
    </ListItem>
  </List>
</Page>