COMPONENTS FEATURE
The field component
A composed form control: label, input, help and error slots, prefix and suffix bound by the UiPart model. One declaration renders an accessible field.
The field component
A raw <input> is rarely enough. A real field needs a label, help text, an error target, and often an adornment — an icon, a unit, a button. Assembling that by hand on every form is how accessibility wiring (for/id, aria-describedby) quietly rots. The field component composes it all into one declarative unit.
Composed from primitives, via parts
platform.field binds the input primitive as a UiPart (bind: 'value'), wraps it with a label and help/error slots, and exposes prefix and suffix slots for adornments. Props resolve through the part model — defaults → provider → bind → caller overrides — so the caller passes intent and the component assembles the markup:
label,name,placeholder,help— the basicsrules— validation rules (see live validation)prefix/suffixslots — adornments beside the input
Accessibility wiring — for/id, aria-describedby, the error target — is generated for you. The demo above renders three real fields, including one with prefix/suffix slots.
Because the field is a declared composition rather than copy-pasted markup, every field on every form stays consistent and accessible. It is also the unit the next two pages build on: live validation adds server-evaluated rules, and the form component aggregates fields into a signed submit — both by declaration, neither by re-assembling the field.
How it works
platform.field binds the input primitive as a UiPart (bind: 'value'), wraps it with a label and help/error slots, and exposes prefix and suffix slots for adornments. Structural props resolve through the UiPart model (defaults → provider → bind → caller overrides), so the caller passes intent — label, name, placeholder, rules — and the component assembles accessible markup: for/id wiring, aria-describedby, the error target, all automatic. The demo above renders three real fields, including one with prefix/suffix slots.
Why it matters
Composing fields from primitives via a declared part model keeps every field consistent and accessible without copy-pasting markup. The same field is the unit that live validation and the form component build on — interactivity and submission are added by declaration, never by re-assembling the field by hand.