Package Exports

@material/web/all
@material/web/all.js
@material/web/button/elevated-button
@material/web/button/elevated-button.js
@material/web/button/filled-button
@material/web/button/filled-button.js
@material/web/button/filled-tonal-button
@material/web/button/filled-tonal-button.js
@material/web/button/harness.js
@material/web/button/internal/filled-button.js
@material/web/button/internal/filled-styles.js
@material/web/button/internal/outlined-button.js
@material/web/button/internal/outlined-styles.js
@material/web/button/internal/shared-elevation-styles.js
@material/web/button/internal/shared-styles.js
@material/web/button/internal/text-button.js
@material/web/button/internal/text-styles.js
@material/web/button/outlined-button
@material/web/button/outlined-button.js
@material/web/button/text-button
@material/web/button/text-button.js
@material/web/checkbox/checkbox
@material/web/checkbox/checkbox.js
@material/web/checkbox/internal/checkbox-styles.js
@material/web/checkbox/internal/checkbox.js
@material/web/chips/assist-chip
@material/web/chips/assist-chip.js
@material/web/chips/chip-set
@material/web/chips/chip-set.js
@material/web/chips/filter-chip
@material/web/chips/filter-chip.js
@material/web/chips/input-chip
@material/web/chips/input-chip.js
@material/web/chips/internal/chip-set-styles.js
@material/web/chips/internal/chip-set.js
@material/web/chips/internal/elevated-styles.js
@material/web/chips/internal/filter-chip.js
@material/web/chips/internal/filter-styles.js
@material/web/chips/internal/selectable-styles.js
@material/web/chips/internal/shared-styles.js
@material/web/chips/internal/trailing-icon-styles.js
@material/web/chips/suggestion-chip
@material/web/chips/suggestion-chip.js
@material/web/common.js
@material/web/dialog/dialog
@material/web/dialog/dialog.js
@material/web/dialog/internal/animations.js
@material/web/dialog/internal/dialog-styles.css
@material/web/dialog/internal/dialog-styles.js
@material/web/dialog/internal/dialog.js
@material/web/divider/divider
@material/web/divider/divider.js
@material/web/divider/internal/divider-styles.js
@material/web/divider/internal/divider.js
@material/web/elevation/elevation
@material/web/elevation/elevation.js
@material/web/elevation/internal/elevation-styles.js
@material/web/elevation/internal/elevation.js
@material/web/fab/branded-fab
@material/web/fab/branded-fab.js
@material/web/fab/fab
@material/web/fab/fab.js
@material/web/field/filled-field
@material/web/field/filled-field.js
@material/web/field/internal/filled-field.js
@material/web/field/internal/filled-styles.js
@material/web/field/internal/outlined-field.js
@material/web/field/internal/outlined-styles.js
@material/web/field/internal/shared-styles.js
@material/web/field/outlined-field
@material/web/field/outlined-field.js
@material/web/focus/md-focus-ring
@material/web/focus/md-focus-ring.js
@material/web/icon/icon
@material/web/icon/icon.js
@material/web/icon/internal/icon-styles.js
@material/web/icon/internal/icon.js
@material/web/iconbutton/filled-icon-button
@material/web/iconbutton/filled-icon-button.js
@material/web/iconbutton/filled-tonal-icon-button
@material/web/iconbutton/filled-tonal-icon-button.js
@material/web/iconbutton/icon-button
@material/web/iconbutton/icon-button.js
@material/web/iconbutton/internal/filled-styles.js
@material/web/iconbutton/internal/filled-tonal-styles.js
@material/web/iconbutton/internal/icon-button.js
@material/web/iconbutton/internal/outlined-styles.js
@material/web/iconbutton/internal/shared-styles.js
@material/web/iconbutton/internal/standard-styles.js
@material/web/iconbutton/outlined-icon-button
@material/web/iconbutton/outlined-icon-button.js
@material/web/internal/aria/aria.js
@material/web/internal/aria/delegate.js
@material/web/internal/controller/form-submitter.js
@material/web/internal/controller/is-rtl
@material/web/internal/controller/is-rtl.js
@material/web/internal/controller/string-converter
@material/web/internal/controller/string-converter.js
@material/web/internal/events/form-label-activation.js
@material/web/internal/events/redispatch-event
@material/web/internal/events/redispatch-event.js
@material/web/internal/motion/animation.js
@material/web/labs/badge/badge
@material/web/labs/badge/badge.js
@material/web/labs/behaviors/constraint-validation
@material/web/labs/behaviors/constraint-validation.js
@material/web/labs/behaviors/element-internals.js
@material/web/labs/behaviors/focusable.js
@material/web/labs/behaviors/form-associated.js
@material/web/labs/behaviors/on-report-validity
@material/web/labs/behaviors/on-report-validity.js
@material/web/labs/behaviors/validators/text-field-validator.js
@material/web/labs/behaviors/validators/validator.js
@material/web/labs/card/elevated-card
@material/web/labs/card/elevated-card.js
@material/web/labs/card/filled-card
@material/web/labs/card/filled-card.js
@material/web/labs/card/outlined-card
@material/web/labs/card/outlined-card.js
@material/web/labs/item/item
@material/web/labs/item/item.js
@material/web/labs/navigationbar/internal/navigation-bar.js
@material/web/labs/navigationbar/navigation-bar
@material/web/labs/navigationbar/navigation-bar.js
@material/web/labs/navigationdrawer/internal/navigation-drawer-modal-styles.js
@material/web/labs/navigationdrawer/internal/navigation-drawer-modal.js
@material/web/labs/navigationdrawer/internal/shared-styles.js
@material/web/labs/navigationdrawer/navigation-drawer
@material/web/labs/navigationdrawer/navigation-drawer-modal
@material/web/labs/navigationdrawer/navigation-drawer-modal.js
@material/web/labs/navigationdrawer/navigation-drawer.js
@material/web/labs/navigationtab/navigation-tab
@material/web/labs/navigationtab/navigation-tab.js
@material/web/labs/segmentedbutton/outlined-segmented-button
@material/web/labs/segmentedbutton/outlined-segmented-button.js
@material/web/labs/segmentedbuttonset/outlined-segmented-button-set
@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js
@material/web/list/harness
@material/web/list/harness.js
@material/web/list/internal/list-styles.js
@material/web/list/internal/list.js
@material/web/list/internal/listitem/list-item-styles.js
@material/web/list/internal/listitem/list-item.js
@material/web/list/list
@material/web/list/list-item
@material/web/list/list-item.js
@material/web/list/list.js
@material/web/menu/internal/controllers/menuItemController.js
@material/web/menu/internal/controllers/shared
@material/web/menu/internal/controllers/shared.js
@material/web/menu/internal/menu-styles.js
@material/web/menu/internal/menu.js
@material/web/menu/internal/menuitem/menu-item-styles.js
@material/web/menu/internal/menuitem/menu-item.js
@material/web/menu/internal/submenu/sub-menu.js
@material/web/menu/menu
@material/web/menu/menu-item
@material/web/menu/menu-item.js
@material/web/menu/menu.js
@material/web/menu/sub-menu
@material/web/menu/sub-menu.js
@material/web/progress/circular-progress
@material/web/progress/circular-progress.js
@material/web/progress/internal/circular-progress-styles.css
@material/web/progress/internal/circular-progress-styles.js
@material/web/progress/internal/circular-progress.js
@material/web/progress/internal/linear-progress-styles.css
@material/web/progress/linear-progress
@material/web/progress/linear-progress.js
@material/web/radio/internal/radio-styles.js
@material/web/radio/internal/radio.js
@material/web/radio/internal/single-selection-controller
@material/web/radio/internal/single-selection-controller.js
@material/web/radio/radio
@material/web/radio/radio.js
@material/web/ripple/ripple
@material/web/ripple/ripple.js
@material/web/select/filled-select
@material/web/select/filled-select.js
@material/web/select/internal/filled-select-styles.js
@material/web/select/internal/filled-select.js
@material/web/select/internal/outlined-select-styles.js
@material/web/select/internal/outlined-select.js
@material/web/select/internal/selectoption/select-option.js
@material/web/select/internal/shared-styles.js
@material/web/select/outlined-select
@material/web/select/outlined-select.js
@material/web/select/select-option
@material/web/select/select-option.js
@material/web/slider/slider
@material/web/slider/slider.js
@material/web/switch/switch
@material/web/switch/switch.js
@material/web/tabs/internal/primary-tab-styles.js
@material/web/tabs/internal/primary-tab.js
@material/web/tabs/internal/secondary-tab-styles.js
@material/web/tabs/internal/secondary-tab.js
@material/web/tabs/internal/tab-styles.js
@material/web/tabs/internal/tabs-styles.js
@material/web/tabs/internal/tabs.js
@material/web/tabs/primary-tab
@material/web/tabs/primary-tab.js
@material/web/tabs/secondary-tab
@material/web/tabs/secondary-tab.js
@material/web/tabs/tabs
@material/web/tabs/tabs.js
@material/web/testing/harness
@material/web/testing/harness.js
@material/web/textfield/filled-text-field
@material/web/textfield/filled-text-field.js
@material/web/textfield/internal/filled-styles.js
@material/web/textfield/internal/filled-text-field.js
@material/web/textfield/internal/outlined-styles.js
@material/web/textfield/internal/outlined-text-field.js
@material/web/textfield/internal/shared-styles.js
@material/web/textfield/outlined-text-field
@material/web/textfield/outlined-text-field.js
@material/web/tokens/_index.scss
@material/web/typography/md-typescale-styles
@material/web/typography/md-typescale-styles.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/web) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material Web

A collection of Material web components

@material/web is a library of web components that helps build beautiful and accessible web applications. It uses Material 3, the latest version of Google's open-source design system.

Note: MWC is in maintenance mode pending new maintainers.

Resources

Quick start

Tip: Using Angular? We recommend using Angular Material components instead.

This code snippet is a buildless example that loads @material/web from a CDN. Check out the quick start guide to install and build for production.

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <script type="importmap">
    {
      "imports": {
        "@material/web/": "https://esm.run/@material/web/"
      }
    }
  </script>
  <script type="module">
    import '@material/web/all.js';
    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';

    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
  </script>
</head>
<body>
  <h1 class="md-typescale-display-medium">Hello Material!</h1>
  <form>
    <p class="md-typescale-body-medium">Check out these controls in a form!</p>
    <md-checkbox></md-checkbox>
    <div>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
      <md-radio name="group"></md-radio>
    </div>

    <md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>

    <md-outlined-button type="reset">Reset</md-outlined-button>
  </form>
  <style>
    form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  </style>
</body>