Nice Pithy Motto

    svelte-switcher
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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

    Install

    npm i svelte-switcher

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    none

    Unpacked Size

    11.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • rohitpotato