From 9aad3aa291bac04a41daf4bf61b4fc960e763d20 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 11 Nov 2025 14:00:02 +0100
Subject: [PATCH] Build out feature

---
 components/src/Switcher/Switcher.stories.svelte | 12 ++++++++++++
 components/src/Switcher/Switcher.svelte         | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte
index b8787626..1fbb77e9 100644
--- a/components/src/Switcher/Switcher.stories.svelte
+++ b/components/src/Switcher/Switcher.stories.svelte
@@ -18,6 +18,18 @@
 	</DesignTokens>
 </Story>
 
+<Story name="Hidden Label" asChild>
+	<DesignTokens theme="light">
+		<Switcher
+			hideLabel
+			options={['Option A', 'Option B']}
+			value="Option A"
+			size="default"
+			label="Label"
+		/>
+	</DesignTokens>
+</Story>
+
 <Story
 	name="Four Options"
 	asChild
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 5880b141..d75ac0e6 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -14,6 +14,7 @@
 		 * Display size
 		 */
 		size?: 'default' | 'small';
+		hideLabel?: boolean;
 		/**
 		 * The currently-selected option (bindable)
 		 */
@@ -28,6 +29,7 @@
 		label,
 		options,
 		size = 'default',
+		hideLabel = false,
 		value = $bindable(null),
 		onchange
 	}: SwitcherProps = $props();
@@ -41,7 +43,9 @@
 </script>
 
 <fieldset class="container" class:small={size === 'small'}>
-	<FormLabel as="legend">{label}</FormLabel>
+	<div class="legend" class:hidden={hideLabel}>
+		<FormLabel as="legend">{label}</FormLabel>
+	</div>
 	<ul>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
@@ -69,6 +73,13 @@
 		font-family: var(--swr-sans);
 	}
 
+	.legend {
+		&.hidden {
+			position: absolute;
+			left: -9999px;
+		}
+	}
+
 	ul {
 		width: 100%;
 		display: flex;