{"id":552,"hash":"6921b1bedae83918ebd378734d2598f62ec4933f17ab97f7e3c20849d9c58062","pattern":"error: &#39;type&#39; attribute cannot be dynamic if input uses two-way binding","full_message":"I was trying to create an Input component for my project. I want to set type attribute dyamically on input element\n\nBut when i set type attribute dynamically on input i get error saying\n'type' attribute cannot be dynamic if input uses two-way binding \n\nSo is there any workaround for this such that i can set type attribute dynamically without loosing two way binding \n\nInput.svelte\n\n<script>\n  export let placeholder = \"\";\n  export let label = \"\";\n  export let description = \"\";\n  export let value = \"\";\n  export let type = \"text\";\n</script>\n\n<div class=\"container\">\n    <label>{label}</label>\n    <input {type} bind:value {placeholder} />\n    <p>{description}</p>\n</div>","ecosystem":"npm","package_name":"svelte","package_version":null,"solution":"The reason type must be static with two-way binding is that the code Svelte generates is different for different kinds of input. For example, number and range inputs must have their values coerced to a number, some inputs need change event listeners instead of input events or vice versa, and so on.\n\nBut you can manually do the same thing the generated code would have been doing — adding an event listener that reflects state:\n\n<script>\n  export let placeholder = \"\";\n  export let label = \"\";\n  export let description = \"\";\n  export let value = \"\";\n  export let type = \"text\";\n\n  const handleInput = e => {\n    // in here, you can switch on type and implement\n    // whatever behaviour you need\n    value = type.match(/^(number|range)$/)\n      ? +e.target.value\n      : e.target.value;\n  };\n</script>\n\n<div class=\"container\">\n    <label>{label}</label>\n    <input {type} {value} {placeholder} on:input={handleInput} />\n    <p>{description}</p>\n</div>","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/57392773/error-type-attribute-cannot-be-dynamic-if-input-uses-two-way-binding","votes":50,"created_at":"2026-04-19T04:51:20.924525+00:00","updated_at":"2026-04-19T04:51:20.924525+00:00"}