Flexible Form Structures

This example demonstrates three ways to structure a form for nested data.

Key Concepts

Kin Form provides several ways to handle nested data objects, like an address. This example shows three different patterns for binding fields to the billingAddress, shippingAddress, and otherAddress objects in the form's data model.

Flattened (Dot Notation): The simplest approach. You can bind directly to nested properties using a dot-separated path in the field() directive. This is great for simple cases where you don't need to create a reusable component for the nested fields.
```
<text-field ${field("billingAddress.line1")}></text-field>
<text-field ${field("billingAddress.line2")}></text-field>
```
Generic Field Group (<kin-field-group>): For more complex cases, you can use the generic <kin-field-group> element. You bind it to the parent object (shippingAddress), and then within its .template, you use the group's field() directive to bind to the nested properties (line1, line2). This pattern is useful when you want to group fields together visually or apply group-level validation without creating a dedicated custom element.
```
<kin-field-group
  ${field("shippingAddress")}
  .template=${(g: KinFieldGroup<Address>) => html`
    <text-field ${g.field("line1")}></text-field>
    <text-field ${g.field("line2")}></text-field>
  `}
></kin-field-group>
```
Custom Field Group Component: The most powerful and reusable pattern. Here, we use a dedicated <address-field> component, which is itself a FieldGroup. You simply bind this component to the otherAddress object. This encapsulates all the logic and UI for an address into a single, reusable component, making your main form cleaner and more modular.
```
<address-field ${field("otherAddress")}></address-field>
```

Choosing the right pattern depends on the complexity of your form and the level of reusability you need.