Input

Input with styling only

Example:


<div style="display: grid; grid-template-rows: 1fr 1fr; grid-gap: 1em">
    <input class="input disabled" value="Joe" disabled />
    <input class="input" placeholder="Password" />
</div>

Result:

Input Component

Example:


<adw-input placeholder="Put your text here"></adw-input>

Result:

Input with suggestions

Example:


<div style="display: grid; grid-template-rows: 1fr 1fr; grid-gap: 1em">
    <adw-input
        placeholder="Select a country"
        suggestions="USA;Canada;Brazil;England;Germany;France;Spain;Poland;Russia;China;Japan"
        fuzzy="true">
    </adw-input>
    <adw-input
        placeholder="Select a country"
        suggestionsorientation="up"
        suggestions="USA;Canada;Brazil;England;Germany;France;Spain;Poland;Russia;China;Japan"
        fuzzy="true">
    </adw-input>
</div>

Result:

Disabled Input

Example:


<adw-input disabled="true" value="This value cannot be changed"></adw-input>

Result: