A single-line text field with label, icons, help text, and validation states. It’s
a form-associated custom element, so it participates in native
<form> submission and validation just like a
built-in input.
Try submitting empty, then “foo”, then “a@b.com”.
Submit & reset — all four form-associated controls participate.
form fields, search inputs, email capture — any single-line text entry. For multi-line input use Text Area.
label; use placeholder for an example, not the label.type / inputmode (email, tel…) so mobile keyboards and validation match.help-text with state="negative".positive unless the success is meaningful to confirm.label is associated with the inner field; keep show-label on, or provide an external label if hidden.type="email", pattern, required) and it participates in submit/reset.state="negative" styles the field and its Help Text; pair it with a message so the error isn’t colour-only.<button aria-haspopup="dialog"> with aria-expanded; the calendar follows the Date Picker keyboard model.input and change with { value }.kind="date".