Repository files navigation

Note:

This project is no longer actively maintained. While automated updates maystill occur, the team will not be prioritizing new features or bug fixes, andthose updates will be turned off in the future.

For Angular users, our friends at Angular Material moved away from thislibrary, and they expect that this may actually allow for faster iteration - seetheirblog postfor more information.

Material Components for the web helps developers executeMaterial Design.Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Material Components for the web is the successor toMaterial Design Lite. In addition to implementing theMaterial Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specificallyarchitected for adaptability to variousmajor web frameworks.

NOTE: Material Components Web tends to release breaking changes on a monthly basis, but followssemver so you can control when you incorporate them.We typically follow a 2-week release schedule which includes one major release per month with breaking changes,and intermediate patch releases with bug fixes.

• Getting Started Guide
• Demos (external site)
• Material on other frameworks
• Examples using Material Web
• Contributing
• Material Design Guidelines (external site)
• Supported browsers
• All Components
• Changelog

<!-- Required styles for Material Web --><linkrel="stylesheet"href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"><!-- Render textfield component --><labelclass="mdc-text-field mdc-text-field--filled"><spanclass="mdc-text-field__ripple"></span><spanclass="mdc-floating-label"id="my-label">Label</span><inputtype="text"class="mdc-text-field__input"aria-labelledby="my-label"><spanclass="mdc-line-ripple"></span></label><!-- Required Material Web JavaScript library --><scriptsrc="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script><!-- Instantiate single textfield component rendered in the document --><script>mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field'));</script>

Please seequick start demo on codepen for full example.

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the fullgetting started guide. You can also see the final code and result in theMaterial Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

Sample usage of text field component. Please seeTextfield component page for more options.

<labelclass="mdc-text-field mdc-text-field--filled"><spanclass="mdc-text-field__ripple"></span><inputtype="text"class="mdc-text-field__input"aria-labelledby="my-label"><spanclass="mdc-floating-label"id="my-label">Label</span><spanclass="mdc-line-ripple"></span></label>

Load styles required for text field component.

@use"@material/floating-label/mdc-floating-label";@use"@material/line-ripple/mdc-line-ripple";@use"@material/notched-outline/mdc-notched-outline";@use"@material/textfield";@includetextfield.core-styles;

ImportMDCTextField module to instantiate text field component.

import{MDCTextField}from'@material/textfield';consttextField=newMDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));

This'll initialize text field component on a single.mdc-text-field element.

Please seequick start demo on glitch for full example.

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on ourDiscord Channel.