Text fields
Filled and outlined text fields (COMPONENT_SPEC §26; Compose TextField and OutlinedTextField) around a native <input> or <textarea> with a <label for>. The label floats with no JavaScript: it is minimized while the input is focused or not empty, its type style lerped from body large to body small on the fast spatial spring (which overshoots under the expressive scheme), as Compose lerps the label TextStyle. Focus thickens the indicator (filled) or the outline to 2dp in primary; aria-invalid="true" switches to the error colors. There are no hover colors and no state layer, as in Compose.
Static (m3e-css)
.m3e-text-field (--outlined, --label-above, --multiline) > __container with the __label, the __input and the optional __leading / __trailing icons, __prefix / __suffix and, when outlined, the __outline fieldset whose__notch legend repeats the label text; then an optional __supporting row with the __supporting-text and the __counter. Give the input a placeholder (placeholder=" " when no text is wanted): the resting label uses:placeholder-shown to know the field is empty.
Element
<m3e-text-field> renders the same contract from attributes and adds what CSS cannot: the live character counter and, where field-sizing: content is missing, the growing textarea.
React
<TextField variant label description errorMessage isInvalid isDisabled isReadOnly isRequired leadingIcon trailingIcon prefix suffix maxLength multiline labelPosition value defaultValue onChange> (React Aria useTextField); the same DOM as the static markup.