Components

Field ​

Use this page when you are overriding Formie's shared field wrapper structure instead of only changing one field type's inner markup.

Anatomy ​

Normal Render ​

Annotated Render ​

Most field pages assume this shared wrapper structure still exists around the field-specific input markup:

AttributePurposeImportance
data-formie-fieldShared field wrapper hookRequired
data-formie-field-handleStable field identity for browser targetingRequired
data-formie-field-uidStable field instance identityPreserve when present
data-formie-field-typeField type identity for modules and stylingPreserve when present
data-formie-input-idStable id used to coordinate label, errors, and browser helpersPreserve when present
data-formie-field-has-errorBrowser error-state flagPreserve when present
data-formie-conditionsSerialised condition contractRequired when the field has conditions
data-formie-validationSerialised validation rule contractRequired when the field validates client-side

These shared structural nodes matter too:

AttributePurposeImportance
data-formie-field-layoutShared field layout wrapperRequired
data-formie-label-positionLabel placement statePreserve when present
data-formie-instructions-positionInstructions placement statePreserve when present
data-formie-label / data-formie-field-labelLabel hooksRequired when the field has a label
data-formie-instructionsInstructions containerPreserve when instructions are shown
data-formie-field-contentInner field content wrapperRequired
data-formie-field-controlControl wrapper for input-owned browser UI stateRequired
data-formie-field-errorsErrors containerRequired for browser error rendering
data-formie-field-errorIndividual error itemRequired for browser error rendering
Last updated: Sep 16, 2026, 3:50 PM