Material Web Components

The md-menu component displays a list of choices on a temporary surface. It is designed to appear as a floating list of options, often triggered by an icon button or similar interaction. For design guidelines and specifications, refer to the Material 3 Menus design article.

<!-- Note: The component name is md-menu as per Material Web conventions -->
<md-menu>...</md-menu>

Material Web Components (MWC) is currently in maintenance mode.

This means:

• There is no current work planned for new features or new components.
• Development is focused on bug fixes or specific contributions on a case-by-case basis.
• Planned future features (such as new components or TSX support) are currently on hold.

Sliders allow users to view and select a value or a range of values along a track. They are suitable for adjusting settings like volume, brightness, or image filters. Sliders can be configured as continuous (subjective range) or discrete (predetermined values using steps and ticks).

<md-slider></md-slider>
<md-slider ticks value="50"></md-slider>
<md-slider range value-start="25" value-end="75"></md-slider>

Chips help users enter information, make selections, filter content, or trigger actions. They are intended to appear dynamically as a group of multiple interactive elements rather than as consistent, standalone buttons.

There are four main types of chips:

• Assist chips: Represent smart or automated actions (e.g., adding an event to a calendar).
• Filter chips: Tags used to filter content (e.g., shopping categories).
• Input chips: Discrete pieces of information entered by a user (e.g., event attendees or contacts).
• Suggestion chips: Dynamic suggestions for user input (e.g., text message replies).

<md-chip-set>
  <md-assist-chip label="Assist"></md-assist-chip>
  <md-filter-chip label="Filter"></md-filter-chip>
  <md-input-chip label="Input"></md-input-chip>
  <md-suggestion-chip label="Suggestion"></md-suggestion-chip>
</md-chip-set>

The @material/web/tokens/versions directory contains auto-generated Material Design tokens. This path is intended for advanced users performing custom implementations or experimenting with the Material Design system.

Warning: This directory is unstable. It may introduce breaking changes at any time, including during minor and patch updates. Most users should instead use the stable APIs provided by @material/web/tokens.

The List component manages ARIA roles and keyboard navigation automatically:

• <md-list>: Defaults to role="list" and tabindex="-1".
• <md-list-item>: Defaults to role="listitem" and tabindex="0".

You can override these using the role and tabindex attributes. Note that <md-list-item> has a limited set of valid type values to ensure accessibility is maintained; refer to the ListItemType TypeScript type for the allowed values.

Material Web components are distributed in bundles (single .js files containing necessary JavaScript and CSS). To help developers manage performance and payload, three metrics are tracked:

• gzip: The minified and compressed size. This affects the download size and network latency.
• minified: The minified but unpacked size. This affects the time it takes for a page to become interactive (parsing/execution time).
• % CSS: The ratio of CSS to JavaScript within the bundle. This helps distinguish between changes in visual styles and changes in logic.

The Switch component is built using a nested structure that separates the interactive elements from the visual styling. The outermost element is a <button> with the class .switch, which contains the visual track, the handle, and a hidden <input type="checkbox"> used to manage the component's state.

When customizing or inspecting the component, note that the .switch element intentionally lacks a border to simplify the application of the focus ring.

<button class="switch">
  <div class="track">
    ::before
    <div class="handle">
      ::before
      <div class="icons">
      </div>
    </div>
  </div>
  <input type="checkbox" aria-hidden="true">
</button>

The Switch component uses several CSS properties to animate transitions between the selected and unselected states:

• Opacity: Applied to .track::before and .handle::before to transition between unselected and selected colors/styles.
• Transform (scale): Applied to .handle to animate the growing and shrinking effect of the handle.
• Margin (inline-start & inline-end): Applied to .handle to animate the physical movement of the handle across the track.

Chips should always be contained within a <md-chip-set>. A chip set acts as a toolbar that can display various types of chips or other toolbar items.

<md-chip-set>
  <md-filter-chip label="All day"></md-filter-chip>
  <md-assist-chip label="Add to calendar"></md-assist-chip>
  <md-assist-chip label="Set a reminder"></md-assist-chip>
</md-chip-set>

Material Web Components use Design Tokens for styling. These tokens are implemented as CSS custom properties (CSS variables). You can customize the appearance of components (such as colors and typefaces) by defining these properties on a parent element or the :root selector.

:root {
  --md-sys-color-primary: olive;
  --md-sys-color-secondary: tomato;
  --md-ref-typeface-brand: 'Open Sans';
  --md-ref-typeface-plain: system-ui;
}