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-ios-light-surface-1-shade dark:bg-ios-dark-surface-1-tint'
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
onChange	function(e)		Toggle input
readonly	boolean	false	Defines whether the toggle input is readonly or not
value	any		Toggle input value

Examples

Toggle.svelte

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

  let checked1 = $state(true);
  let checked2 = $state(true);
  let checked3 = $state(true);
  let checked4 = $state(true);
</script>

<Page>
  <Navbar title="Toggle">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>

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

Toggle Svelte Component

Contents

Toggle Components

Toggle Props

Examples