Skip to content

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

Notifications You must be signed in to change notification settings

rohitpotato/svelte-switcher

Repository files navigation

Svelte Switcher

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

Installation

Install svelte-switcher with npm

  npm install svelte-switcher

Usage/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