Svelte Switcher

A fully accessible, mobile-friendly and customisable toggle component for svelte apps.

View examples and demo here

Installation

Install svelte-switcher with npm

  npm install svelte-switcher

Usage/Examples

Click here to view examples

<script>
    import Toggle from 'svelte-switcher'
</script>

<Toggle
    id="svelte-toggle"
    name="theme-toggle"
    defaultChecked={false}
    on:toggle={handleToggle}
    ...
/>

API

Props

Props	Description	Default value
checked	determines if the toggle is active	false
disabled	determines if the toggle is disabled	false
onChange	fires when toggle status change	void
onFocus	fires when toggle is focused	void
onBlur	fires when toggle is unfocused	void
name	name attr for the underlying input element	svelte-switcher-name
value	value attr for the underlying input element	svelte-switcher-value
id	id attr for the underlying input element	svelte-switcher-id
ariaLabelledBy	ariaLabelledBy attr
ariaLabel	ariaLabel attr

Slots

Slot Name	Description	Default value
checked-component	Slot for checked state icon / component
unchecked-component	Slot for unchecked state icon / component

Events

Event Name	Description	Payload
toggle	Fires when toggle status changes	isChecked: boolean