filled
outlined
help text
error
icons
trailing action
file field
prefix / suffix
char counter
row with checkbox
focus delegation / selection API
host.focus() delegates to the inner <input>
(delegatesFocus). The buttons exercise the selection
passthroughs — select(), setSelectionRange()
and getSelectionRange().
on tinted bg
Outlined keeps a real notch — works on any background.
in a form
inline validation — native invalid → MD3 error, no browser bubble
Every field below is required with no help-text/error-text
of its own. Hit Submit empty: instead of the browser's native validation bubble,
each control paints its own MD3 error state with the browser's localized message
(reportValidity() → invalid event → inline paint,
same mechanism across textfield/checkbox/select/textarea/radio-group).
"Set custom error" exercises setCustomValidity().
Sample usage
<!-- variants: outlined (default) | filled -->
<material-textfield label="Email"></material-textfield>
<material-textfield variant="filled" label="Email"></material-textfield>
<!-- supporting text + error -->
<material-textfield label="Email" help-text="We'll never share it"></material-textfield>
<material-textfield label="Email" error error-text="Enter a valid email"></material-textfield>
<!-- icons + affixes -->
<material-textfield label="Search" leading-icon="search"></material-textfield>
<material-textfield label="Amount" leading-text="$" trailing-text=".00" type="number"></material-textfield>
<!-- char counter -->
<material-textfield label="Bio" max-length="80"></material-textfield>
<!-- form-associated -->
<form>
<material-textfield name="email" label="Email" type="email" required></material-textfield>
</form>