Toggle Svelte Component

Toggle Components

There are following components included:

  • Toggle

Toggle Props

NameTypeDefaultDescription
checkedbooleanfalse

Defines whether the toggle input is checked or not

colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-primary'

Checked toggle bg color

disabledbooleanfalse

Defines whether the toggle input is disabled or not

namestring

Toggle input name

readonlybooleanfalse

Defines whether the toggle input is readonly or not

valueany

Toggle input value

onChangefunction(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>
<ListItem title="Item 1">
<Toggle
slot="after"
class="-my-1"
checked={checked1}
onChange={() => (checked1 = !checked1)}
/>
</ListItem>
<ListItem title="Item 2">
<Toggle
slot="after"
class="-my-1"
colors={{ bg: 'bg-red-500' }}
checked={checked2}
onChange={() => (checked2 = !checked2)}
/>
</ListItem>
<ListItem title="Item 3">
<Toggle
slot="after"
class="-my-1"
colors={{ bg: 'bg-green-500' }}
checked={checked3}
onChange={() => (checked3 = !checked3)}
/>
</ListItem>
<ListItem title="Item 4">
<Toggle
slot="after"
class="-my-1"
colors={{ bg: 'bg-yellow-500' }}
checked={checked4}
onChange={() => (checked4 = !checked4)}
/>
</ListItem>
</List>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.