radio/checkbox: spacing only when label is on

themesberg · Mar 25, 2024 · d75f574 · d75f574
1 parent fdef33d
commit d75f574
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/lib/forms/Checkbox.svelte b/src/lib/forms/Checkbox.svelte
@@ -12,7 +12,7 @@
   export let group: (string | number)[] = [];
   export let value: string | number = 'on';
   export let checked: boolean | undefined = undefined;
-  export let spacing: string = 'me-2';
+  export let spacing: string = $$slots.default ? 'me-2' : '';
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');

diff --git a/src/lib/forms/Radio.svelte b/src/lib/forms/Radio.svelte
@@ -29,7 +29,7 @@
   export let inline: boolean = false;
   export let group: number | string | undefined = undefined;
   export let value: number | string = '';
-  export let spacing: string = 'mr-2';
+  export let spacing: string = $$slots.default ? 'me-2' : '';
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');

diff --git a/src/routes/docs/forms/checkbox.md b/src/routes/docs/forms/checkbox.md
@@ -333,7 +333,7 @@ Use this example of an advanced layout of checkbox elements where the label pare
   <Checkbox bind:group value={2}>Two</Checkbox>
   <Checkbox bind:group value={3}>Three</Checkbox>
 </div>
-<div class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44">Group: {group}</div>
+<div class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44 dark:text-gray-400">Group: {group}</div>
 <Button on:click={() => (group.length = 0)}>Clear</Button>
 ```