Flexible Field Components

This example demonstrates the flexibility of Kin Form's component model, showing two ways to create form fields: using the generic <kin-field> element and creating a dedicated custom element.

Key Concepts

Generic Field (<kin-field>): For the "Line 1" field, we use the generic <kin-field> element. This approach is useful for one-off fields or when you need complete control over the template directly in the main form. You provide a .template function that defines the exact HTML structure, including the <label>, <input>, and any validation message rendering.
```
<kin-field
  ${field("billingAddress.line1")}
  .template=${(f: KinField<string>) => html`
    <label>Line 1</label>
    <input .value=${f.value} @change=${f.handleChange} />
  `}
></kin-field>
```
Custom Field Component (<text-field>): For the "Line 2" field, we use a <text-field> custom element. This component is a LitElement that extends FormField, encapsulating its own template and logic. This is the recommended approach for any field that you will reuse, as it makes your forms cleaner, more declarative, and easier to maintain. The implementation details are hidden inside the component, and you can simply use it like any other HTML element.
```
<text-field
  label="Line 2"
  ${field("billingAddress.line2")}
></text-field>
```

By supporting both generic wrappers and dedicated custom elements, Kin Form allows you to choose the right level of abstraction for your needs, from quick one-offs to a robust, reusable component library.