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.
But you can manually do the same thing the generated code would have been doing — adding an event listener that reflects state:
<script>
export let placeholder = "";
export let label = "";
export let description = "";
export let value = "";
export let type = "text";
const handleInput = e => {
// in here, you can switch on type and implement
// whatever behaviour you need
value = type.match(/^(number|range)$/)
? +e.target.value
: e.target.value;
};
</script>
<div class="container">
<label>{label}</label>
<input {type} {value} {placeholder} on:input={handleInput} />
<p>{description}</p>
</div>