Merge pull request #16 from milahu/patch-4

fix: A form label must be associated with a control
AlexxNB · Dec 16, 2020 · f4f3e86 · f4f3e86
2 parents 048daec + c06deed
commit f4f3e86
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/cmp/Field.svelte b/cmp/Field.svelte
@@ -15,6 +15,8 @@
 	const state = writable('');
 	let message = false;
 
+	let slot_wrapper;
+
 	setContext('field:state',state);
 	
 	$: if(gapless) grouped = true;
@@ -35,9 +37,9 @@
 
 <div class:nomessage={!message} use:events {...$$restProps}>
 	{#if label}
-		<label>{label}</label>
+		<label for={slot_wrapper.id}>{label}</label>
 	{/if}
-	<p class:grouped class:gapless><slot/></p>
+	<p bind:this={slot_wrapper} class:grouped class:gapless><slot/></p>
 	{#if message}
 		<p class="message" class:text-error={error} class:text-success={success}>{message}</p>
 	{:else}
@@ -58,4 +60,4 @@ p{
 .grouped:not(.gapless){
 	overflow-x: auto;
 }
-</style>
+</style>