Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Form: Use Cases

Submit & Reset

To submit a form, use a regular <button> (or <lion-button-submit>) somewhere inside the native <form>.

Then, add a submit handler on the <lion-form>.

You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.

Another example is checking if the form has errors, and focusing the first field with an error.

To fire a submit from JavaScript, select the <lion-form> element and call .submit().

export const formSubmit = () => {
  const submitHandler = ev => {
    const formData =;
    console.log('formData', formData);
    if (!'error')) {
      fetch('/api/foo/', {
        method: 'POST',
        body: JSON.stringify(formData),
  const submitViaJS = ev => {
    // Call submit on the lion-form element, in your own code you should use
    // a selector that's not dependent on DOM structure like this one.;
  return html`
    <lion-form @submit=${submitHandler}>
      <form @submit=${ev => ev.preventDefault()}>
          label="First Name"
          .validators="${[new Required()]}"
          label="Last Name"
          .validators="${[new Required()]}"
        <div style="display:flex">
            @click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
    <button @click=${submitViaJS}>Explicit submit via JavaScript</button>