Svelte Switcher

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

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`

Top categories