Text Field

Text fields allow users to input, edit, and select text. Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

Demos

Basic Usage

<mdc-text-field> is a web component. All we need to do is put the required script into your HTML document. Then follow <mdc-text-field>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-mdc-text-field.js">        
</script>

Structure

Put the input inside <mdc-text-field> as its child.
<label>'s content will be present as its label.

Note: the [slot="input"] attribute must be present on <input> & <label>. Once [slot="icon"] has been set, it will present as icon just next to the <input>. [class='helper']'s content will be set as helper text.

<mdc-text-field data-layout="filled" data-icon-direction="leading">
  <input
    type="text"
    name="mdc-text-field"
    slot="input"
    placeholder="placeholder"
    required />
  <label slot="input">Standard</label>
  <img slot="icon" src="icon.svg" />
  <p class="helper">Helper Text</p>
</mdc-text-field>

JavaScript Instantiation

<mdc-text-field> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('mdc-text-field');
  document.body.appendChild(nodeAPI);
  nodeAPI.name = 'YourName';
  nodeAPI.value = 'YourValue';

  //new Classes
  nodeClasses = new MdcTextField();
  document.body.appendChild(nodeClasses);
  nodeClasses.name = 'YourName';
  nodeClasses.value = 'YourValue';  
</script>

Style Customization

<mdc-text-field> use CSS variables to style its interface. That means developer could easy change them into the lookup you like. (demo)

<style>
mdc-text-field {
  --theme-color: #018786;
  --label: rgba(0,0,0,.6);
  --border-color: rgba(142,142,142,.5);
  --border-color-hover: rgba(142,142,142,1);
  --bgcolor: rgba(245,245,245,.5);
  --bgcolor-hover: rgba(245,245,245,1);
  --invalid: #d32f2f;
}
</style>

Variants

<mdc-text-field> supports some common state to let it become more convenience & useful.

Disabled

Note that mdc-text-field[disabled] will trigger <mdc-text-field> into disabled state. (demo)

<mdc-text-field disabled data-layout="filled">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Readonly

Note that mdc-text-field[readonly] will trigger <mdc-text-field> into readonly state. (demo)

<mdc-text-field readonly data-layout="filled">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Invalid

Note that mdc-text-field[invalid] will trigger <mdc-text-field> into invalid state. The error message will be display. (demo)

<mdc-text-field invalid data-layout="filled">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

<mdc-text-field> also supports several layouts for different usages. Developer could just modify attribute data-layout or mdc-text-field's property layout.

Filled (demo)

<mdc-text-field data-layout="filled">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Outlined (demo)

<mdc-text-field data-layout="outlined">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Shaped Filled (demo)

<mdc-text-field data-layout="shaped-filled">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Shaped Outlined (demo)

<mdc-text-field data-layout="shaped-outlined">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Once [slot="icon"] has been set. Developer could just modify attribute data-icon-direction or mdc-text-field's property iconDirection to decide the icon's direction.

[data-icon-direction="leading"] (demo)

<mdc-text-field data-icon-direction="leading">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

[data-icon-direction="trailing"] (demo)

<mdc-text-field data-icon-direction="trailing">
  <input type="text" name="mdc-text-field" slot="input"/>
  <label slot="input">Standard</label>
</mdc-text-field>

Properties

Methods