diff --git a/src/components/editor/TokenEditor.svelte b/src/components/editor/TokenEditor.svelte
index 6b7acecd1..ed35dc51d 100644
--- a/src/components/editor/TokenEditor.svelte
+++ b/src/components/editor/TokenEditor.svelte
@@ -22,7 +22,7 @@
         text = $bindable(),
         placeholder,
         validator,
-        creator
+        creator,
     }: Props = $props();
 
     let view: HTMLInputElement | undefined = $state(undefined);
@@ -114,7 +114,7 @@
 
 <TextField
     bind:text
-    id={token.id}
+    data={token.id}
     bind:view
     classes={['token-editor']}
     placeholder={placeholder ?? ''}
diff --git a/src/components/palette/AuraEditor.svelte b/src/components/palette/AuraEditor.svelte
index 27e944629..d892c04df 100644
--- a/src/components/palette/AuraEditor.svelte
+++ b/src/components/palette/AuraEditor.svelte
@@ -18,9 +18,16 @@
         property: OutputProperty;
         values: OutputPropertyValueSet;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, property, values, editable }: Props = $props();
+    let {
+        project,
+        property,
+        values,
+        editable,
+        id = undefined,
+    }: Props = $props();
 
     let blur = $state(
         getNumberBind(project.shares.output.Aura.inputs[1], values) ?? 0.05,
@@ -151,7 +158,7 @@
 </script>
 
 {project.shares.output.Aura.names.getSymbolicName()}
-<div class="aura">
+<div class="aura" {id}>
     <ColorChooser
         {lightness}
         {chroma}
diff --git a/src/components/palette/BindCheckbox.svelte b/src/components/palette/BindCheckbox.svelte
index 493daaff2..e90e9524c 100644
--- a/src/components/palette/BindCheckbox.svelte
+++ b/src/components/palette/BindCheckbox.svelte
@@ -10,9 +10,10 @@
         property: OutputProperty;
         values: OutputPropertyValues;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { property, values, editable }: Props = $props();
+    let { property, values, editable, id = undefined }: Props = $props();
 
     const project = getProject();
 
@@ -37,5 +38,5 @@
     on={values.getBool()}
     changed={handleChange}
     {editable}
-    id={property.getName()}
+    {id}
 />
diff --git a/src/components/palette/BindColor.svelte b/src/components/palette/BindColor.svelte
index cdbe28c28..204cd0ef5 100644
--- a/src/components/palette/BindColor.svelte
+++ b/src/components/palette/BindColor.svelte
@@ -15,9 +15,10 @@
         property: OutputProperty;
         values: OutputPropertyValueSet;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { property, values, editable }: Props = $props();
+    let { property, values, editable, id = undefined }: Props = $props();
 
     let project = getProject();
     let selection = getSelectedOutput();
@@ -96,4 +97,11 @@
     );
 </script>
 
-<ColorChooser {lightness} {chroma} {hue} change={handleChange} {editable} />
+<ColorChooser
+    {id}
+    {lightness}
+    {chroma}
+    {hue}
+    change={handleChange}
+    {editable}
+/>
diff --git a/src/components/palette/BindOptions.svelte b/src/components/palette/BindOptions.svelte
index 12164306d..48e632bc1 100644
--- a/src/components/palette/BindOptions.svelte
+++ b/src/components/palette/BindOptions.svelte
@@ -11,13 +11,15 @@
         values: OutputPropertyValues;
         options: OutputPropertyOptions;
         editable: boolean;
+        id?: string | undefined;
     }
 
     let {
         property,
         values,
         options,
-        editable
+        editable,
+        id = undefined,
     }: Props = $props();
 
     let project = getProject();
@@ -37,7 +39,7 @@
 </script>
 
 <Options
-    id={property.getName()}
+    {id}
     label={property.getName()}
     value={options.toText(values.getExpression())}
     width="7em"
diff --git a/src/components/palette/BindSlider.svelte b/src/components/palette/BindSlider.svelte
index 9c0828cfc..0a66de751 100644
--- a/src/components/palette/BindSlider.svelte
+++ b/src/components/palette/BindSlider.svelte
@@ -15,14 +15,10 @@
         values: OutputPropertyValues;
         range: OutputPropertyRange;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let {
-        property,
-        values,
-        range,
-        editable
-    }: Props = $props();
+    let { property, values, range, editable, id = undefined }: Props = $props();
 
     const project = getProject();
 
@@ -57,4 +53,5 @@
     change={handleChange}
     precision={range.precision}
     {editable}
+    {id}
 />
diff --git a/src/components/palette/BindText.svelte b/src/components/palette/BindText.svelte
index 35ae33981..cf346da9b 100644
--- a/src/components/palette/BindText.svelte
+++ b/src/components/palette/BindText.svelte
@@ -22,13 +22,15 @@
         values: OutputPropertyValues;
         validator: (text: string) => boolean;
         editable: boolean;
+        id?: string | undefined;
     }
 
     let {
         property,
         values,
         validator,
-        editable
+        editable,
+        id = undefined,
     }: Props = $props();
 
     let project = getProject();
@@ -80,6 +82,7 @@
         changed={handleChange}
         bind:view
         {editable}
+        {id}
     />
     {isMarkup
         ? FORMATTED_SYMBOL
diff --git a/src/components/palette/ContentEditor.svelte b/src/components/palette/ContentEditor.svelte
index 3d477ad8b..243216518 100644
--- a/src/components/palette/ContentEditor.svelte
+++ b/src/components/palette/ContentEditor.svelte
@@ -14,9 +14,10 @@
         project: Project;
         list: ListLiteral | undefined;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, list, editable }: Props = $props();
+    let { project, list, editable, id = undefined }: Props = $props();
 
     const selection = getSelectedOutput();
 
@@ -50,7 +51,7 @@
     }
 </script>
 
-<div class="list">
+<div class="list" {id}>
     {#if list && valid}
         {#each list.values as content, index}
             <div class="content">
diff --git a/src/components/palette/MotionEditor.svelte b/src/components/palette/MotionEditor.svelte
index c41130ba3..a0dc9f8f4 100644
--- a/src/components/palette/MotionEditor.svelte
+++ b/src/components/palette/MotionEditor.svelte
@@ -8,21 +8,26 @@
         project: Project;
         motion: Evaluate;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, motion, editable }: Props = $props();
+    let { project, motion, editable, id = undefined }: Props = $props();
 
-    let place = $derived(motion.getInput(
-        project.shares.input.Motion.inputs[0],
-        project.getNodeContext(motion)
-    ));
-    let velocity = $derived(motion.getInput(
-        project.shares.input.Motion.inputs[1],
-        project.getNodeContext(motion)
-    ));
+    let place = $derived(
+        motion.getInput(
+            project.shares.input.Motion.inputs[0],
+            project.getNodeContext(motion),
+        ),
+    );
+    let velocity = $derived(
+        motion.getInput(
+            project.shares.input.Motion.inputs[1],
+            project.getNodeContext(motion),
+        ),
+    );
 </script>
 
-<div class="motion">
+<div class="motion" {id}>
     {project.shares.input.Motion.names.getPreferredNameString([], true)}
     {#if place instanceof Evaluate}
         <div class="field"
diff --git a/src/components/palette/PaletteProperty.svelte b/src/components/palette/PaletteProperty.svelte
index c1d9b663f..78b63bd74 100644
--- a/src/components/palette/PaletteProperty.svelte
+++ b/src/components/palette/PaletteProperty.svelte
@@ -45,6 +45,7 @@
     let bind = $derived(values.getBind());
     let bindConcept = $derived(bind ? index?.getBindConcept(bind) : undefined);
     let valuesAreSet = $derived(values.areSet());
+    let propertyID = $derived(`property-${property.getName()}`);
 
     let toggleView: HTMLButtonElement | undefined = $state();
 
@@ -66,7 +67,7 @@
                     label={DOCUMENTATION_SYMBOL}
                 /></small
             >{/if}
-        <label for={property.getName()}
+        <label for={propertyID}
             >{bindConcept?.getName($locales, false) ?? '—'}</label
         >
         {#if editable}
@@ -81,11 +82,13 @@
     {/snippet}
     {#snippet control()}
         {#if values.areMixed()}
-            <Note>{$locales.get((l) => l.ui.palette.labels.mixed)}</Note>
+            <Note id={propertyID}
+                >{$locales.get((l) => l.ui.palette.labels.mixed)}</Note
+            >
         {:else if !values.areSet()}
             {@const expression = values.getExpression()}
             <!-- If the values arent set, show as inherited if inherited, and otherwise show the default -->
-            <Note
+            <Note id={propertyID}
                 >{#if property.inherited}{$locales.get(
                         (l) => l.ui.palette.labels.inherited,
                     )}{:else if values.areDefault() && expression !== undefined}<NodeView
@@ -96,11 +99,20 @@
                     )}{:else}&mdash;{/if}</Note
             >
         {:else if !values.areEditable(project)}
-            <Note>{$locales.get((l) => l.ui.palette.labels.computed)}</Note>
+            <Note id={propertyID}
+                >{$locales.get((l) => l.ui.palette.labels.computed)}</Note
+            >
         {:else if property.type instanceof OutputPropertyRange}
-            <BindSlider {property} {values} range={property.type} {editable} />
+            <BindSlider
+                id={propertyID}
+                {property}
+                {values}
+                range={property.type}
+                {editable}
+            />
         {:else if property.type instanceof OutputPropertyOptions}
             <BindOptions
+                id={propertyID}
                 {property}
                 {values}
                 options={property.type}
@@ -108,19 +120,21 @@
             />
         {:else if property.type instanceof OutputPropertyText}
             <BindText
+                id={propertyID}
                 {property}
                 {values}
                 validator={property.type.validator}
                 {editable}
             />
         {:else if property.type === 'color'}
-            <BindColor {property} {values} {editable} />
+            <BindColor id={propertyID} {property} {values} {editable} />
         {:else if property.type === 'bool'}
-            <BindCheckbox {property} {values} {editable} />
+            <BindCheckbox id={propertyID} {property} {values} {editable} />
         {:else if property.type === 'pose'}
             {@const expression = values.getExpression()}
             {#if expression instanceof Evaluate && expression.is(project.shares.output.Pose, project.getNodeContext(expression))}
                 <PoseEditor
+                    id={propertyID}
                     {project}
                     outputs={values.getOutputExpressions(project, $locales)}
                     sequence={false}
@@ -128,6 +142,7 @@
                 />
             {:else if expression instanceof Evaluate && expression.is(project.shares.output.Sequence, project.getNodeContext(expression))}
                 <SequenceEditor
+                    id={propertyID}
                     {project}
                     outputs={values.getOutputExpressions(project, $locales)}
                     {editable}
@@ -136,9 +151,19 @@
         {:else if property.type === 'aura'}
             <AuraEditor {project} {property} {values} {editable} />
         {:else if property.type == 'poses'}
-            <SequencePosesEditor {project} map={values.getMap()} {editable} />
+            <SequencePosesEditor
+                id={propertyID}
+                {project}
+                map={values.getMap()}
+                {editable}
+            />
         {:else if property.type === 'content'}
-            <ContentEditor {project} list={values.getList()} {editable} />
+            <ContentEditor
+                id={propertyID}
+                {project}
+                list={values.getList()}
+                {editable}
+            />
         {:else if property.type === 'place'}
             {@const place = values.getEvaluationOf(
                 project,
@@ -153,11 +178,22 @@
                 project.shares.input.Placement,
             )}
             {#if place}
-                <PlaceEditor {project} {place} {editable} convertable={true} />
+                <PlaceEditor
+                    id={propertyID}
+                    {project}
+                    {place}
+                    {editable}
+                    convertable={true}
+                />
             {:else if motion}
-                <MotionEditor {project} {motion} {editable} />
+                <MotionEditor id={propertyID} {project} {motion} {editable} />
             {:else if placement}
-                <PlacementEditor {project} {placement} {editable} />
+                <PlacementEditor
+                    id={propertyID}
+                    {project}
+                    {placement}
+                    {editable}
+                />
             {/if}
         {/if}
     {/snippet}
diff --git a/src/components/palette/PlaceEditor.svelte b/src/components/palette/PlaceEditor.svelte
index 4a6a5b403..17628ab87 100644
--- a/src/components/palette/PlaceEditor.svelte
+++ b/src/components/palette/PlaceEditor.svelte
@@ -20,13 +20,15 @@
         place: Evaluate;
         editable: boolean;
         convertable: boolean;
+        id?: string | undefined;
     }
 
     let {
         project,
         place,
         editable,
-        convertable
+        convertable,
+        id = undefined,
     }: Props = $props();
 
     let views: HTMLInputElement[] = $state([]);
@@ -82,7 +84,7 @@
 </script>
 
 {project.shares.output.Place.names.getSymbolicName()}
-<div class="place">
+<div class="place" {id}>
     {#each project.shares.output.Place.inputs as dimension, index}
         {@const given = place?.getInput(
             dimension,
diff --git a/src/components/palette/PlacementEditor.svelte b/src/components/palette/PlacementEditor.svelte
index ab1f89691..4c4af191f 100644
--- a/src/components/palette/PlacementEditor.svelte
+++ b/src/components/palette/PlacementEditor.svelte
@@ -7,17 +7,20 @@
         project: Project;
         placement: Evaluate;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, placement, editable }: Props = $props();
+    let { project, placement, editable, id = undefined }: Props = $props();
 
-    let place = $derived(placement.getInput(
-        project.shares.input.Placement.inputs[0],
-        project.getNodeContext(placement)
-    ));
+    let place = $derived(
+        placement.getInput(
+            project.shares.input.Placement.inputs[0],
+            project.getNodeContext(placement),
+        ),
+    );
 </script>
 
-<div class="motion">
+<div class="motion" {id}>
     {project.shares.input.Placement.names.getPreferredNameString([], true)}
     {#if place instanceof Evaluate}
         <div class="field"
diff --git a/src/components/palette/PoseEditor.svelte b/src/components/palette/PoseEditor.svelte
index 00ed48421..63698c505 100644
--- a/src/components/palette/PoseEditor.svelte
+++ b/src/components/palette/PoseEditor.svelte
@@ -19,9 +19,16 @@
         outputs: OutputExpression[];
         sequence: boolean;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, outputs, sequence, editable }: Props = $props();
+    let {
+        project,
+        outputs,
+        sequence,
+        editable,
+        id = undefined,
+    }: Props = $props();
 
     let PoseProperties = $derived(getPoseProperties(project, $locales, false));
 
@@ -65,7 +72,7 @@
     }
 </script>
 
-<div class="pose-properties">
+<div class="pose-properties" {id}>
     {#each Array.from(propertyValues.entries()) as [property, values]}
         <PaletteProperty {project} {property} {values} {editable} />
     {/each}
diff --git a/src/components/palette/SequenceEditor.svelte b/src/components/palette/SequenceEditor.svelte
index a81ebb286..133745002 100644
--- a/src/components/palette/SequenceEditor.svelte
+++ b/src/components/palette/SequenceEditor.svelte
@@ -12,9 +12,10 @@
         project: Project;
         outputs: OutputExpression[];
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, outputs, editable }: Props = $props();
+    let { project, outputs, editable, id = undefined }: Props = $props();
 
     let SequenceProperties = $derived(getSequenceProperties(project, $locales));
 
@@ -37,7 +38,7 @@
     });
 </script>
 
-<div class="sequence-properties">
+<div class="sequence-properties" {id}>
     {#each Array.from(propertyValues.entries()) as [property, values]}
         <PaletteProperty {project} {property} {values} {editable} />
     {/each}
diff --git a/src/components/palette/SequencePosesEditor.svelte b/src/components/palette/SequencePosesEditor.svelte
index a1b7075d1..7ba3ff23f 100644
--- a/src/components/palette/SequencePosesEditor.svelte
+++ b/src/components/palette/SequencePosesEditor.svelte
@@ -18,23 +18,25 @@
         project: Project;
         map: MapLiteral | undefined;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, map, editable }: Props = $props();
+    let { project, map, editable, id = undefined }: Props = $props();
 
     // Get the map from the value set, unless its not a valid sequence or the maps of the selections aren't equal.
-    let valid =
-        $derived(map !== undefined &&
-        map.values.every(
-            (kv) =>
-                kv instanceof KeyValue &&
-                kv.key instanceof NumberLiteral &&
-                kv.value instanceof Evaluate &&
-                kv.value.is(
-                    project.shares.output.Pose,
-                    project.getNodeContext(kv.value)
-                )
-        ));
+    let valid = $derived(
+        map !== undefined &&
+            map.values.every(
+                (kv) =>
+                    kv instanceof KeyValue &&
+                    kv.key instanceof NumberLiteral &&
+                    kv.value instanceof Evaluate &&
+                    kv.value.is(
+                        project.shares.output.Pose,
+                        project.getNodeContext(kv.value),
+                    ),
+            ),
+    );
 
     function revisePercent(kv: KeyValue | Expression, percent: string) {
         let text = percent.replace('%', '');
@@ -52,9 +54,9 @@
                 NumberLiteral.make(
                     kv instanceof KeyValue && kv.key instanceof NumberLiteral
                         ? kv.key.number.getText().replace('%', '')
-                        : 0
+                        : 0,
                 ),
-                createPoseLiteral(project, $locales)
+                createPoseLiteral(project, $locales),
             ),
             ...map.values.slice(index + 1),
         ] as KeyValue[]);
@@ -89,7 +91,7 @@
     }
 </script>
 
-<div class="pairs">
+<div class="pairs" {id}>
     {#if map && valid}
         {#each map.values as pair, index}
             {#if pair instanceof KeyValue && pair.value instanceof Evaluate}
@@ -98,7 +100,7 @@
                         ><TextField
                             text={pair.key.toWordplay()}
                             description={$locales.get(
-                                (l) => l.ui.palette.sequence.field
+                                (l) => l.ui.palette.sequence.field,
                             ).percent}
                             placeholder="%"
                             validator={(value) => {
@@ -131,14 +133,14 @@
                         />
                         <Button
                             tip={$locales.get(
-                                (l) => l.ui.palette.sequence.button.add
+                                (l) => l.ui.palette.sequence.button.add,
                             )}
                             active={editable}
                             action={() => addPose(index)}>+</Button
                         >
                         <Button
                             tip={$locales.get(
-                                (l) => l.ui.palette.sequence.button.remove
+                                (l) => l.ui.palette.sequence.button.remove,
                             )}
                             action={() => removePose(index)}
                             active={editable &&
@@ -147,14 +149,14 @@
                         >
                         <Button
                             tip={$locales.get(
-                                (l) => l.ui.palette.sequence.button.up
+                                (l) => l.ui.palette.sequence.button.up,
                             )}
                             action={() => movePose(index, -1)}
                             active={editable && index > 0}>↑</Button
                         >
                         <Button
                             tip={$locales.get(
-                                (l) => l.ui.palette.sequence.button.down
+                                (l) => l.ui.palette.sequence.button.down,
                             )}
                             action={() => movePose(index, 1)}
                             active={editable && index < map.values.length - 1}
@@ -168,7 +170,7 @@
                                 new OutputExpression(
                                     project,
                                     pair.value,
-                                    $locales
+                                    $locales,
                                 ),
                             ]}
                             sequence
diff --git a/src/components/palette/TextStyleEditor.svelte b/src/components/palette/TextStyleEditor.svelte
index 0eb9b782c..601316f6d 100644
--- a/src/components/palette/TextStyleEditor.svelte
+++ b/src/components/palette/TextStyleEditor.svelte
@@ -130,7 +130,7 @@
             markup = markup.replaceAll(weight, '');
         }
         // Add the desired weight.
-        const delimiter = format ? weights[format] ?? '' : '';
+        const delimiter = format ? (weights[format] ?? '') : '';
         markup = delimiter + markup + delimiter;
 
         // Update the program
@@ -252,8 +252,7 @@
                 /></small
             >
         {/if}
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label id="formatted"
+        <label for="formatted"
             >{$locales.get((l) => l.ui.palette.labels.format)}</label
         >
     {/snippet}
diff --git a/src/components/widgets/Checkbox.svelte b/src/components/widgets/Checkbox.svelte
index b195f5ec5..205451466 100644
--- a/src/components/widgets/Checkbox.svelte
+++ b/src/components/widgets/Checkbox.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-    
     interface Props {
         on: boolean | undefined;
         label: string;
         changed?: undefined | ((value: boolean | undefined) => void);
         editable?: boolean;
         /** Mandatory id for label */
-        id: string | null;
+        id: string | undefined;
     }
 
     let {
@@ -14,7 +13,7 @@
         label,
         changed = undefined,
         editable = true,
-        id
+        id,
     }: Props = $props();
 
     function handleInput() {
diff --git a/src/components/widgets/ColorChooser.svelte b/src/components/widgets/ColorChooser.svelte
index 2301abbbc..035ed0bfe 100644
--- a/src/components/widgets/ColorChooser.svelte
+++ b/src/components/widgets/ColorChooser.svelte
@@ -58,10 +58,6 @@
     import Button from './Button.svelte';
     import { getFirstName } from '../../locale/LocaleText';
 
-    
-    
-    
-    
     interface Props {
         /** a degree (any number remainder 360) */
         hue: number;
@@ -72,6 +68,7 @@
         /** A handler */
         change: (l: number, c: number, h: number) => void;
         editable?: boolean;
+        id?: string | undefined;
     }
 
     let {
@@ -79,14 +76,13 @@
         chroma = $bindable(),
         lightness = $bindable(),
         change,
-        editable = true
+        editable = true,
+        id = undefined,
     }: Props = $props();
 
-    let color = $derived(new ColorJS(
-        ColorJS.spaces.lch,
-        [lightness * 100, chroma, hue],
-        1,
-    ));
+    let color = $derived(
+        new ColorJS(ColorJS.spaces.lch, [lightness * 100, chroma, hue], 1),
+    );
 
     let hueWidth: number | undefined = $state(undefined);
     let hueHeight: number | undefined = $state(undefined);
@@ -107,7 +103,7 @@
     }
 </script>
 
-<div class="component">
+<div class="component" {id}>
     <div class="preview" style:background-color={color.display()}></div>
     <div
         class="bands"
@@ -124,14 +120,14 @@
                     lightness * 100,
                     val,
                 ).join(', ')})"
-></div>
+            ></div>
         {/each}
 
         <div
             class="selection"
             style:left="{hueToPercent(hue) * hueWidth}px"
             style:top="{(1 - chromaToPercent(chroma)) * hueHeight}px"
-></div>
+        ></div>
     </div>
     <div class="primary">
         {#each Primary as primary}<Button
@@ -148,7 +144,7 @@
                         ColorJS.spaces.lch,
                         primary,
                     ).display()}
-></div></Button
+                ></div></Button
             >{/each}
     </div>
     <div class="slider">
diff --git a/src/components/widgets/Note.svelte b/src/components/widgets/Note.svelte
index 028d26058..ce1c3d36a 100644
--- a/src/components/widgets/Note.svelte
+++ b/src/components/widgets/Note.svelte
@@ -2,12 +2,13 @@
     interface Props {
         center?: boolean;
         children?: import('svelte').Snippet;
+        id?: string | undefined;
     }
 
-    let { center = false, children }: Props = $props();
+    let { center = false, id = undefined, children }: Props = $props();
 </script>
 
-<div class="note" class:center>{@render children?.()}</div>
+<div class="note" {id} class:center>{@render children?.()}</div>
 
 <style>
     div {
diff --git a/src/components/widgets/Slider.svelte b/src/components/widgets/Slider.svelte
index 49dfd032f..cbf40b758 100644
--- a/src/components/widgets/Slider.svelte
+++ b/src/components/widgets/Slider.svelte
@@ -14,6 +14,7 @@
         change: (value: Decimal) => void;
         precision?: number;
         editable: boolean;
+        id?: string | undefined;
     }
 
     let {
@@ -26,7 +27,8 @@
         tip,
         change,
         precision = 0,
-        editable
+        editable,
+        id = undefined,
     }: Props = $props();
 
     let view: HTMLInputElement | undefined = $state(undefined);
@@ -52,14 +54,14 @@
     -->
     &#8203;
     {#if label}
-        <label for="label">{label}</label>
+        <label for={id ?? 'label'}>{label}</label>
     {/if}
     <input
         class="slider"
         type="range"
         aria-label={tip}
         title={tip}
-        id={label}
+        id={id ?? label}
         {min}
         {max}
         step={increment}
diff --git a/src/components/widgets/TextField.svelte b/src/components/widgets/TextField.svelte
index 151cb78c8..75c56f9c5 100644
--- a/src/components/widgets/TextField.svelte
+++ b/src/components/widgets/TextField.svelte
@@ -18,10 +18,11 @@
         editable?: boolean;
         classes?: string[] | undefined;
         /** An optional ID applied to the data-id attribute*/
-        id?: number | undefined;
+        data?: number | undefined;
         kind?: 'email' | 'password' | undefined;
         /** CSS length or nothing, setting the max-width of the field*/
         max?: string | undefined;
+        id?: string | undefined;
     }
 
     let {