bind:value
An extremely common pattern when handling input is to tie the value of an <input> or <textarea> to a variable in javascript
const TextInput: Component<{},{
textvalue: string
}> = function() {
this.textvalue = "Preset text..."
return (
<div>
<input bind:value={use(this.textvalue)} />
value of input is: {use(this.textvalue)}
</div>
)
}
Remember that bind always goes 2 ways. Whenever you assign the value of this.textvalue the input will update, and whenever the user types into the input field the value of this.textvalue will update. You can also use this for <textarea>
bind:checked
Same thing as bind:value but specifically for checkboxes
const CheckBox: Component<{},{
ischecked: boolean
}> = function() {
this.ischecked = true
return (
<div>
<input type="checkbox" bind:checked={use(this.ischecked)} />
</div>
)
}