kt-form

A panel grouping related fields.

The surface

The panel sits on --surface-form, one step above the page. Fields inside are filled at --surface-field, one step below it — so they read as wells recessed into the panel rather than as boxes floating on it. The relationship survives the light theme, because both are roles rather than ramp steps.

Put it inside your own <form>

This renders a <fieldset>, not a form, and that is deliberate.

Kanto fields are form-associated custom elements, and a control finds its form by walking its own tree. A <form> inside this element's shadow root is not an ancestor of anything slotted into it, so it would own nothing and new FormData(form) would come back empty. The <form> above stays in charge of submission, validation and reset; the panel owns the grouping and the look.

Several panels in one form is the usual shape:

A fieldset, so the group has a name

The heading is the <legend>, which is what gives the group its accessible name — a screen reader announces "Identity, group" as focus enters it. Without a heading the legend stays in the accessibility tree but is visually hidden, rather than being dropped.

Disabling

disabled switches off every slotted control. A native <fieldset disabled> does this for its descendants, but slotted fields are not descendants of the fieldset in their own tree — the shadow boundary sits between them — so the platform never reaches them and the panel walks them itself.

Loading

loading draws placeholder fields in front of the real ones. The fields stay mounted and keep their values, so a panel that reloads its options does not throw away what the user already typed.

API