What is a Field?

A field is a named value stored on a component and mirrored in the DOM. It represents structured state that belongs to that component. You define fields in HTML using data-* attributes:

<div data-component="TextInput"
     data-label="Delivery address"
     data-validation_errors="">
</div>

When Qite initializes this component:

• It reads data-label and data-validation_errors
• It stores them inside this.fields
• It keeps them synchronized with the DOM.

From JavaScript, you access fields like this:

this.fields.get("label");
this.fields.set("label", "New label");

When you call set(), Qite updates both the internal value and the corresponding DOM attribute.

Fields live in two places on purpose

Unlike many frameworks that separate "internal state" from the DOM, Qite intentionally keeps fields visible in markup. If you inspect the element in DevTools, you can see the current values as data-* attributes or as inner text of a dom-element. The DOM reflects component state.

This has two consequences:

• Initial state can be defined directly in HTML.
• Runtime state is transparent and inspectable.

Fields belong to components

Fields are scoped to a single component instance. They are not global and are not shared between components. If you have:

<div data-component="TextInput" data-label="Home"></div>
<div data-component="TextInput" data-label="Work"></div>

each instance has its own independent fields object.

Fields are not parts

It is important not to confuse fields with parts.

• data-field defines a field value.
• data-part marks a DOM element inside a component.

Fields and parts represent two different things: state and structure respectively. You will see how fields interact with events and states in the next pages. But first we'll need to talk about different ways fields can be associated with DOM and why sometimes you might need a slightly more customized connection.