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.
-
FormController
: We initialize aFormController
with aUser
type, providing it with aninitialValue
and anonSubmit
handler. The controller manages the entire state of the form. -
<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. -
Custom Template: The
<kin-field>
element accepts a.template
property. This is a function that receives the field's state (f
) and returns a Lithtml
template. This gives you full control over the field's appearance and behavior. -
Binding with
field()
: The${this.#form.field('name')}
directive binds the<kin-field>
element to thename
property of the form's data. This handles the two-way data flow between the input and the form's state. -
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.