Text Field

<mdc-text-field label="Align end" align-end value="1,234.56" prefix-text="$"></mdc-text-field>
<mdc-text-field variant="outlined" label="Align end outlined" align-end value="99" suffix-text="%"></mdc-text-field>

<mdc-text-field label="Clearable field" value="Click clear to empty" clearable></mdc-text-field>
<mdc-text-field variant="outlined" label="Clearable outlined" value="Clear me" clearable></mdc-text-field>

<mdc-text-field label="Bio" counter maxlength="100" value="Hello world"></mdc-text-field>
<mdc-text-field variant="outlined" label="Custom counter" counter-text="3 / 10 items" value="abc"></mdc-text-field>

<mdc-text-field label="Disabled filled" value="Disabled text" disabled></mdc-text-field>
<mdc-text-field variant="outlined" label="Disabled outlined" value="Disabled text" disabled></mdc-text-field>

<mdc-text-field label="Error text" error error-text="Invalid username provided"></mdc-text-field>
<mdc-text-field variant="outlined" label="Outlined error" error error-text="This field is required"></mdc-text-field>

<mdc-text-field label="Auto float" floating-label-behavior="auto"></mdc-text-field>
<mdc-text-field label="Always float" floating-label-behavior="always"></mdc-text-field>
<mdc-text-field label="Never float" floating-label-behavior="never"></mdc-text-field>

<mdc-text-field label="Standard label"></mdc-text-field>
<mdc-text-field label="Required label" required></mdc-text-field>
<mdc-text-field label="No asterisk label" required no-asterisk></mdc-text-field>

<mdc-text-field label="Search">
    <mdc-icon slot="leading-icon">search</mdc-icon>
</mdc-text-field>
<mdc-text-field variant="outlined" label="Account">
    <mdc-icon slot="leading-icon">person</mdc-icon>
</mdc-text-field>

<mdc-text-field label="Short code" maxlength="6" counter value="123456"></mdc-text-field>
<mdc-text-field variant="outlined" label="Max length 10" maxlength="10" counter value="Testing"></mdc-text-field>

<mdc-text-field label="Comments (Textarea)" type="textarea" rows="3" value="Multi-line text input example"></mdc-text-field>
<mdc-text-field variant="outlined" label="Description" type="textarea" rows="4" counter maxlength="200" value="Outlined textarea description"></mdc-text-field>

<mdc-text-field label="With placeholder" placeholder="placeholder@domain.com"></mdc-text-field>
<mdc-text-field placeholder="No label placeholder"></mdc-text-field>

<mdc-text-field label="Website" prefix-text="https://"></mdc-text-field>
<mdc-text-field label="Price" prefix-text="$" value="99.99"></mdc-text-field>

<mdc-text-field label="Readonly field" value="Cannot edit this text" readonly></mdc-text-field>
<mdc-text-field variant="outlined" label="Readonly outlined" value="Read only" readonly></mdc-text-field>

<mdc-text-field label="Required field" required></mdc-text-field>
<mdc-text-field label="Required without asterisk" required no-asterisk></mdc-text-field>

<mdc-text-field label="Weight" suffix-text="kg" value="65"></mdc-text-field>
<mdc-text-field label="Domain" suffix-text=".com" value="sandlada"></mdc-text-field>

<mdc-text-field label="Username" supporting-text="Your unique handle on the platform"></mdc-text-field>
<mdc-text-field variant="outlined" label="Email" supporting-text="We will never share your email"></mdc-text-field>

<mdc-text-field label="Event date">
    <mdc-icon slot="trailing-icon">event</mdc-icon>
</mdc-text-field>
<mdc-text-field variant="outlined" label="Info">
    <mdc-icon slot="trailing-icon">info</mdc-icon>
</mdc-text-field>

<mdc-text-field label="Text" type="text" value="Sample text"></mdc-text-field>
<mdc-text-field label="Password" type="password" value="secret123"></mdc-text-field>
<mdc-text-field label="Email" type="email" value="user@example.com"></mdc-text-field>
<mdc-text-field label="Number" type="number" value="42"></mdc-text-field>
<mdc-text-field label="Search" type="search" value="Material 3"></mdc-text-field>
<mdc-text-field label="Tel" type="tel" value="+1-555-0199"></mdc-text-field>
<mdc-text-field label="URL" type="url" value="https://material.io"></mdc-text-field>

<mdc-text-field label="Empty" value=""></mdc-text-field>
<mdc-text-field label="Populated" value="Pre-filled value"></mdc-text-field>

<mdc-text-field variant="filled" label="Filled variant" value="Filled text"></mdc-text-field>
<mdc-text-field variant="outlined" label="Outlined variant" value="Outlined text"></mdc-text-field>