Search code examples
javascripthtmlmaterial-designmaterial-components-webmdc-components

How to include Material.io outlined textfield in non-Node.js app

I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the outlined textfield component in my HTML project?

Below is my code: 

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />

    </head>
    <body>
        <!--button class="mdc-button mdc-button--raised">Button</button-->
         

        <div class="mdc-text-field mdc-text-field--outlined">
            <input type="text" id="tf-outlined" class="mdc-text-field__input" />

            <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
            <div class="mdc-notched-outline">
                <svg>
                    <path class="mdc-notched-outline__path"></path>
                </svg>
            </div>
            <div class="mdc-notched-outline__idle"></div>
        </div>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </body>
</html>

A fiddle for this code: jsfiddle

Solution

  • You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).

    mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField Quick Start</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
      <input type="text" class="mdc-text-field__input">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label">Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
    </label>
  </body>
</html>