@kintools/form-lit

Lit bindings for Kin Form:

• watch directive to subscribe just one part of a template to a field
• WatchController to subscribe a whole component's render()
• MultistepController for wizard-style forms.

Depends on and re-exports everything from @kintools/form-core, so no need to install it separately.

Documentation

See kintools.dev/form.

Install

npm add @kintools/form-lit

pnpm add @kintools/form-lit

deno add jsr:@kintools/form-lit

Quick start

import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { FormApi, watch } from "@kintools/form-lit";
import { required } from "@kintools/form-validators";

@customElement("login-form")
class LoginForm extends LitElement {
  #form = new FormApi({
    initialValue: { email: "", password: "" },
    onSubmit: async (form) => await login(form.value),
    onSubmitError: () => toast.error("Failed to log in"),
  });

  override render() {
    return html`
      <form @submit=${this.#form.handleSubmit}>
        ${watch(
          this.#form.field("email", {
            validators: required("Email is required"),
          }),
          (field) =>
            html`
              <input
                .value=${field.value}
                @blur=${field.handleBlur}
                @input=${(e: Event) =>
                  field.handleChange((e.target as HTMLInputElement).value)}
              >
              ${field.invalid && field.touched
                ? html`<span>${field.error}</span>`
                : ""}
            `,
        )}

        ${watch(
          this.#form,
          (f) => f.submitting,
          (_form, submitting) =>
            html`
              <button type="submit" ?disabled=${submitting}>Log in</button>
            `,
        )}
      </form>
    `;
  }
}

With reusable components:

html`
  <form @submit=${form.handleSubmit}>
    <text-field
      .api=${form.field("email", { validators: required("Email is required") })}
      label="Email"
    ></text-field>
    <submit-button .api=${form}>Log in</submit-button>
  </form>
`;

See Form Composition for building text-field, submit-button, and so on.