Custom form controls
If for some reason you're not using an HTML5 input, select or textarea element as an input, you can always bind to the data store in order to let Felte manage your custom controls.
<script>
import { createForm } from 'felte';
const { form, data } = createForm({ /* ... */ });
</script>
<form use:form>
<SomeCustomControl bind:value={$data.customControlName} />
</form>You may also use any of the returned helpers from createForm for this as well.
<script>
import { createForm } from 'felte';
const { form, setField } = createForm({ /* ... */ });
function handleChange(event) {
setField('customControlName', event.detail.value);
}
</script>
<form use:form>
<SomeCustomControl on:customChangeEvent="{handleChange}" />
</form>NOTE: If your custom form control uses an
inputor other native form control behind the scenes, you may dispatch aninputorchangeevent from it when the value of it changes (if your control does not do this already). Felte listens tochangeevents for<input type="checkbox">,<input type="radio">,<select>and<input type="file">elements; and forinputevents on any other type ofinput.