<%# Form field: label (+ inline link / "Optional") · icon input · hint · error. Mirrors html-css-foundation auth markup. Config: id, name, label type? (default "text"), value?, placeholder?, autocomplete?, required?, readonly?, minlength? icon? input-ico id (e.g. "i-mail") → left-padded input optional? show an "Optional" tag in the label row link? { href, label } inline beside the label (e.g. Forgot password?) hint? muted helper text under the input error? string | { text } | { html } — server-driven; sets aria-invalid + describedby %><% const id = locals.id; const type = locals.type || "text"; const icon = locals.icon; const optional = !!locals.optional; const link = locals.link; const hint = locals.hint; const error = locals.error; const errId = id + "-err"; -%>
<% if (link || optional) { -%>
<% if (link) { %><%= link.label %><% } else { %>Optional<% } %>
<% } else { -%> <% } -%>
<% if (icon) { %><% } %> autocomplete="<%= locals.autocomplete %>"<% } %><% if (locals.placeholder) { %> placeholder="<%= locals.placeholder %>"<% } %><% if (locals.value != null) { %> value="<%= locals.value %>"<% } %><% if (locals.minlength != null) { %> minlength="<%= locals.minlength %>"<% } %><% if (error) { %> aria-invalid="true" aria-describedby="<%= errId %>"<% } %><% if (locals.required) { %> required<% } %><% if (locals.readonly) { %> readonly<% } %>>
<% if (hint) { -%> <%= hint %> <% } -%> <% if (error) { -%> <% } -%>