✨ Add Switch component for Svelte & React

Author: Frontendland

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "svelte.plugin.svelte.compilerWarnings": {
         "a11y-click-events-have-key-events": "ignore",
-        "a11y-no-static-element-interactions": "ignore"
+        "a11y-no-static-element-interactions": "ignore",
+        "a11y-no-noninteractive-element-interactions": "ignore"
     }
 }

src/components/Switch/Switch.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { SwitchProps } from './switch'
+    import './switch.scss'
+    
+    export let label: SwitchProps['label'] = ''
+    export let toggled: SwitchProps['toggled'] = false
+    export let offColor: SwitchProps['offColor'] = ''
+    export let onColor: SwitchProps['onColor'] = ''
+    export let reverse: SwitchProps['reverse'] = false
+    export let small: SwitchProps['small'] = false
+    export let square: SwitchProps['square'] = false
+    export let disabled: SwitchProps['disabled'] = false
+    export let className: SwitchProps['className'] = ''
+    export let onClick: () => any = () => {}
+    
+    const classes = [
+        'w-switch',
+        reverse && 'reverse',
+        small && 'small',
+        square && 'square',
+        disabled && 'disabled',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const styles = [
+        offColor && `--w-switch-off-color: ${offColor};`,
+        onColor && `--w-switch-on-color: ${onColor};`
+    ].filter(Boolean).join(' ')
+</script>
+
+<label class={classes} style={styles || null} on:click={onClick}>
+    <input type="checkbox" checked={toggled} disabled={disabled} />
+    <span class="toggle"></span>
+    {#if label}
+        <span class="label">{label}</span>
+    {/if}
+</label>

src/components/Switch/Switch.tsx

@@ -2,14 +2,44 @@ import React from 'react'
 import type { SwitchProps } from './switch'
 import './switch.scss'
 
+type ReactSwitchProps = {
+    onClick: () => any
+} & SwitchProps
+
 const Switch = ({
-    
-}: SwitchProps) => {
+    label,
+    toggled,
+    offColor,
+    onColor,
+    reverse,
+    small,
+    square,
+    disabled,
+    className,
+    onClick
+}: ReactSwitchProps) => {
+    const classes = [
+        'w-switch',
+        reverse && 'reverse',
+        small && 'small',
+        square && 'square',
+        disabled && 'disabled',
+        className
+    ].filter(Boolean).join(' ')
 
+    const styles = {
+        ...(offColor && { '--w-switch-off-color': offColor }),
+        ...(onColor && { '--w-switch-on-color': onColor })
+    } as React.CSSProperties
 
     return (
-        <div>switch</div>
+        <label className={classes} style={styles || null} onClick={onClick}>
+            <input type="checkbox" checked={toggled} disabled={disabled} />
+            <span className="toggle"></span>
+            {label && <span className="label">{label}</span>}
+        </label>
     )
+    
 }
 
 export default Switch

src/pages/switch.astro

@@ -30,11 +30,11 @@ const sections = [
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteSwitch color="#ee5253" />
+            <SvelteSwitch offColor="#ee5253" />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactSwitch color="#48dbfb" />
+            <ReactSwitch offColor="#48dbfb" />
         </ComponentWrapper>
     </div>
 

svelte.config.js

@@ -8,6 +8,7 @@ export default {
 		const ignoreWarnings = [
 			'a11y-click-events-have-key-events',
             'a11y-no-static-element-interactions',
+			'a11y-no-noninteractive-element-interactions',
 			'.accordion-title'
 		]