Component reference
Text Fields
Material 3 Expressive Text Field components for entering text.
Material 3Web ComponentFramework agnostic
Usage
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
<m3-text-field label="Username"></m3-text-field>
<m3-text-field label="Password" type="password"></m3-text-field>Disabled State
Text fields can be disabled to prevent user interaction.
<m3-text-field label="Disabled" disabled></m3-text-field>
<m3-text-field label="Disabled with value" value="Some value" disabled></m3-text-field>Interactive Example
Listen to the native input event to respond to each user edit.
You typed:
<m3-text-field
label="Email"
[value]="email"
(input)="onTextFieldInput($event)">
</m3-text-field>
<p>Email: {{email}}</p>