Custom form controls

If for some reason you're not using an HTML5 input, select or textarea element as an input, you have two options:

Using helpers

The more straightforward way would be to use any of the returned helpers from <felte-form> for handling inputs.

<script type="module">
  import '@felte/element/felte-form';

  const felteForm = document.querySelector('felte-form');
  const customControl = document.querySelector('some-custom-control');

  customControl.addEventListener('customchangeevent', (event) => {
    felteForm.setFields('customControlName', event.detail.value, true);


If your custom form control uses an input or other native form control behind the scenes, you may dispatch an input or change event from it when the value of it changes (if your control does not do this already). Felte listens to change events for <input type="checkbox">, <input type="radio">, <select> and <input type="file"> elements; and for input events on any other type of input.

Using felte-field

You might want to use other custom elements as inputs for your form. Custom elements generally hide all of its behaviour via a Shadow DOM, and some times they may use events with different names for events. For this situations you can use <felte-field>.

<script type="module">
  import '@felte/element/felte-field';

<felte-field name="fieldName" valueprop="textContent">
  <div contenteditable role="textbox" tabindex="0"></div>

NOTE: The class for <felte-field> is export from @felte/element without side effects if you want to register it with your own name or extend from it to build your own custom element.

The previous element will behave just like a regular input when used within a form managed by Felte. Only requiring a name prop.

The previous example also shows that you can use the valueprop attribute to specify which attribute will contain the value of the input. All attributes/properties accepted by <felte-field> are:

NOTE: The name after a slash (/) refers to the same attribute but accessed as a property.