<label>
    <Toggle 
        id="svelte-toggle" 
        name="theme-toggle" 
        onChange={handleChange}
        defaultChecked={false}
    />
</label>

<label>
    <Toggle 
        id="svelte-toggle" 
        name="theme-toggle" 
        onChange={handleChange}
        defaultChecked={false}
    >
        <span slot='checked-component'>&U+2713;</span>
        <span slot='unchecked-component'>X</span>
    </Toggle>
</label>

    <Toggle 
        id="svelte-toggle-with-label" 
        name="theme-toggle" 
        onChange={handleChange}
        defaultChecked={false}
    >
    </Toggle>
    <label for='svelte-toggle-with-label'>Try clicking here</label>

// Bind the checked prop with your external state to control the toggle status 

<label>
    <Toggle 
        bind:{checked}={toggleStatus}
        id="svelte-toggle" 
    />
</label>

// Wrap Toggle in a div, style with global prefix to control every aspect of the toggle

<div id='custom-styling'>
    <label>
        <Toggle 
            value='value'
            id="svelte-toggle" 
            name="svelte-toggle"
            ariaLabel="toggle"
            onChange={handleChange}
            disabled={true}
        />
    </label>
</div>

<style>
    #custom-styling > :global(.svelte-toggle .svelte-toggle--track) {
		width: 60px;
		height: 30px;
		border-radius: 4px;
	}

	#custom-styling > :global(.svelte-toggle .svelte-toggle--thumb) {
		height: 29px;
		width: 28px;
		border-radius: 4px;
	}

	#custom-styling > :global(.svelte-toggle.svelte-toggle--checked .svelte-toggle--thumb) {
		left: 32px;
	}

	#custom-styling > :global(.svelte-toggle.svelte-toggle--checked .svelte-toggle--track) {
		background-color: rgb(158, 42, 152);
	}

	#custom-styling
		> :global(.svelte-toggle.svelte-toggle--checked:hover:not(.svelte-toggle--disabled)
			.svelte-toggle--track) {
		background-color: rgb(132, 3, 126) !important;
	}

	#custom-styling
		> :global(.svelte-toggle:hover:not(.svelte-toggle--disabled) .svelte-toggle--track) {
		background-color: #4d4d4d !important;
	}
</style>