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/internal/filled-button.js
@material/web/button/internal/outlined-button.js
@material/web/button/internal/text-button.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.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/dialog-styles.css
@material/web/dialog/internal/dialog.js
@material/web/divider/divider
@material/web/divider/divider.js
@material/web/divider/internal/divider.js
@material/web/elevation/elevation
@material/web/elevation/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/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.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/icon-button.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/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.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.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/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/internal/list.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.js
@material/web/menu/internal/menu.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.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/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.js
@material/web/select/internal/selectoption/select-option.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/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-text-field.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>