Basic Example

This example demonstrates a basic form with two fields using the generic element <kin-field>.

For reusable form fields, consider creating custom elements that extend FormField<TValue, TParentValue> or FieldGroup<TValue, TParentValue>.

Key Concepts

This example showcases the simplest way to get a form up and running.

1. FormController: We initialize a FormController with a User type, providing it with an initialValue and an onSubmit handler. The controller manages the entire state of the form.

2. <kin-field>: This is a generic, unstyled wrapper element provided by the library. It's useful for simple forms or for when you want to provide a completely custom template for a field.

3. Custom Template: The <kin-field> element accepts a .template property. This is a function that receives the field's state (f) and returns a Lit html template. This gives you full control over the field's appearance and behavior.

4. Binding with field(): The ${this.#form.field('name')} directive binds the <kin-field> element to the name property of the form's data. This handles the two-way data flow between the input and the form's state.

5. Event Handling: The template connects standard DOM events like @blur and @change to the handler methods provided by the field state (f.handleBlur, f.handleChange), which updates the form controller automatically.

Live Demo