Focus a Dynamic Input Field in Svelte

When a user adds a new row, tag, address, or form field, focus should usually move straight to the new input. In Svelte, the two practical options are a reusable action or the native autofocus attribute. The action approach is more reliable for dynamically added fields because it runs when the element is created.

Table of Contents

1. Use a Svelte action
2. Use autofocus for simple cases
3. Common mistakes
4. Frequently asked questions
5. Related Svelte guides

use:action

Actions are functions that are called when an element is created.

<script>
  let inputs = [];

  function addInput() {
    inputs = […inputs, { title: "" }];
  }

  function callFocus(input){
    input.focus();
  }
</script>

{#each inputs as i}
  <input type="text" bind:value={i.title} use:callFocus />
{/each}

<button on:click={addInput}>Add Input Field</button>

This works because use:callFocus receives the actual DOM node after Svelte creates it. If you want to reuse the behavior across components, rename the action to something like autoFocus and keep it in a shared helper file.

autofocus Attribute:

<script>
  let inputs = [];

  function addInput() {
    inputs = […inputs, { title: "" }];
  }
</script>

{#each inputs as i}
  <input type="text" bind:value={i.title} autofocus />
{/each}

<button on:click={addInput}>Add Input Field</button>

autofocus is fine when the element is present on initial page load. For repeated dynamic additions, prefer the action because it does not depend on browser-specific autofocus timing.

Common mistakes

Calling focus before the input exists

If you call input.focus() immediately after updating an array, the DOM may not have rendered the new input yet. An action avoids this because Svelte runs it after the element is mounted.

Reusing the same object without a key

When focusing items in an {#each} block, use stable data and a keyed each block if items can be inserted or removed from the middle.

{#each inputs as input (input.id)}
  <input bind:value={input.title} use:callFocus />
{/each}

Frequently Asked Questions

Related Svelte guides

• How to import CSS from node_modules in Svelte
• Install Bootstrap in SvelteKit
• SvelteJS Guide