fix: add optional label to file list

Jaspero · Jan 2, 2024 · d923b5d · d923b5d
1 parent ddadc58
commit d923b5d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/docs/docs/Form fields/file-list.md b/docs/docs/Form fields/file-list.md
@@ -9,6 +9,7 @@
 | Name | Required |   Type   |     Description      |
 |:--------:|:------------:|:------------:|:------------------------:|
 |    value    |              |   `string` (list of urls separated by comma)   |    initial value     |
+|    label    |              |   `string` (HTML)   |    displayed above the field     |
 |    id    |              |   `string`   |    unique identifier     |
 |   name   |      ✓       |   `string`   | name of the form control |
 | service  |      ✓       | [`FileService`](#fileservice) |      file service       |

diff --git a/packages/lib/src/form-fields/file-list.wc.svelte b/packages/lib/src/form-fields/file-list.wc.svelte
@@ -20,6 +20,7 @@
 
   export let attachedInternals: ElementInternals;
   export let value: string = '';
+  export let label: string = '';
   export let id: string = '';
   export let name: string = '';
   export let service: FileService;
@@ -202,6 +203,13 @@
   }}
 />
 
+{#if label}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label>
+    {@html label}
+  </label>
+{/if}
+
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="dropzone"