diff --git a/packages/components/ui/src/Switch.svelte b/packages/components/ui/src/Toggle.svelte
similarity index 87%
rename from packages/components/ui/src/Switch.svelte
rename to packages/components/ui/src/Toggle.svelte
index 137d556b6..b5fb7edf8 100644
--- a/packages/components/ui/src/Switch.svelte
+++ b/packages/components/ui/src/Toggle.svelte
@@ -5,10 +5,11 @@
 
 	const dispatch = createEventDispatcher();
 	const defaultTheme = {
-		height: '24px',
 		color: 'black',
 		backgroundColor: 'white',
-		knobColor: 'lightgrey'
+		focusOutline: '2px auto black',
+		height: '24px',
+		knobColor: 'lightgrey',
 	}
 
 	// mandatory
@@ -32,12 +33,20 @@
 		currentValue = currentValue === values[0] ? values[1] : values[0];
 		dispatch('toggled', currentValue);
 	}
+	const onKeypress = event => {
+		if (event.keyCode === 13 || event.key === ' ') {
+			event.preventDefault();
+			toggle();
+		}
+	}
 </script>
 
-<div class='switch' {style} on:click={toggle}>
+<div class='switch' {style}>
 	<fieldset
-		role='radiogroup'
 		aria-label='Select between {values[0]} and {values[1]}'
+		role='select'
+		on:keypress={onKeypress}
+		tabindex=0
 	>
 		<legend>Select between {values[0]} and {values[1]}</legend>
 		{#if !hideLabels}
@@ -46,19 +55,11 @@
 			>{values[0]}</label>
 			<!-- class:greyed={currentValue !== values[0]} -->
 		{/if}
-		<span class='wrapper' class:isRight>
-			<input
-				type='radio'
-				id='left-{id}'
-				bind:group={currentValue}
-				value='{values[0]}'
-			>
-			<input
-				type='radio'
-				id='right-{id}'
-				bind:group={currentValue}
-				value='{values[1]}'
-			>
+		<span
+			class='wrapper'
+			class:isRight
+			on:click={toggle}
+		>
 			<span aria-hidden='true' class='bkg'></span>
 			<span aria-hidden='true' class='knob'></span>
 		</span>
@@ -116,6 +117,10 @@
 		position: relative;
 	}
 
+	fieldset:focus-visible {
+		outline: var(--focusOutline);
+	}
+
 	.knob {
 		--border: 1px;
 		--diameter: calc(var(--height) - 2 * var(--border));