← All demos

Form-associated custom elements

textfield-form, checkbox-form, and combobox-form use static formAssociated = true and FieldAssociationController to participate in form submission and reset alongside native inputs. button-form calls internals.form.requestSubmit() / internals.form.reset(). Submit the form to compare FormData entries from custom and native fields side by side.

Custom elements

textfield-form — light DOM sibling label

Bio textfield-form — slotted label Subscribe to newsletter checkbox-form — slotted label Favorite fruit combobox-form — Arrow keys navigate, Enter selects
  • Apple
  • Banana
  • Cherry
  • Date
  • Elderberry
    •
    Native elements (for comparison)

    Native <input type="text">

    Native <input type="text">

    Native <input type="checkbox">

    Native <select>

    Custom: Submit Reset Native:

    Output

    FormData on last submit

    No submission yet — fill the form and click Submit.

    Event log

    • Waiting for form events…