IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release.
Material Web is Google’s UI toolkit for building beautiful, accessible web applications. Material Web is implemented as a collection of web components. Material 3 is the latest version of Google’s open-source design system.
Note: Looking for Material 2?
<mwc-*components are now on themwcbranch.
Alpha components are in-development and may have many frequent breaking changes.
Beta components are mostly polished and ready for use.
Stable components are reviewed, documented, and API complete.
- 🔴 Not started
- 🟡 In progress
- 🟢 Complete
| Component | Alpha | Beta | Stable |
|---|---|---|---|
| Button | 🟢 | 🟢 | 🔴 |
| FAB | 🟢 | 🔴 | 🔴 |
| Icon button | 🟢 | 🔴 | 🔴 |
| Checkbox | 🟢 | 🟢 | 🔴 |
| Chips | 🔴 | 🔴 | 🔴 |
| Dialog | 🟢 | 🔴 | 🔴 |
| Divider | 🟢 | 🟢 | 🟡 |
| Elevation | 🟢 | 🔴 | 🔴 |
| Focus ring | 🟢 | 🔴 | 🔴 |
| Field | 🟢 | 🟢 | 🔴 |
| Icon | 🟢 | 🔴 | 🔴 |
| List | 🟡 | 🔴 | 🔴 |
| Menu | 🟡 | 🔴 | 🔴 |
| Progress indicator (circular) | 🔴 | 🔴 | 🔴 |
| Progress indicator (linear) | 🔴 | 🔴 | 🔴 |
| Radio button | 🟢 | 🟢 | 🔴 |
| Ripple | 🟢 | 🟡 | 🔴 |
| Select | 🔴 | 🔴 | 🔴 |
| Slider | 🔴 | 🔴 | 🔴 |
| Switch | 🟢 | 🟢 | 🔴 |
| Tabs | 🔴 | 🔴 | 🔴 |
| Text field | 🟢 | 🟢 | 🔴 |
These components are planned for release after 1.0.
| Component | Alpha | Beta | Stable |
|---|---|---|---|
| Autocomplete | 🟡 | 🔴 | 🔴 |
| Badge | 🟡 | 🔴 | 🔴 |
| Banner | 🔴 | 🔴 | 🔴 |
| Bottom app bar | 🔴 | 🔴 | 🔴 |
| Bottom sheet | 🔴 | 🔴 | 🔴 |
| Segmented button | 🟡 | 🔴 | 🔴 |
| Card | 🔴 | 🔴 | 🔴 |
| Data table | 🔴 | 🔴 | 🔴 |
| Date picker | 🔴 | 🔴 | 🔴 |
| Navigation bar | 🟡 | 🔴 | 🔴 |
| Navigation drawer | 🟡 | 🔴 | 🔴 |
| Navigation rail | 🔴 | 🔴 | 🔴 |
| Search | 🔴 | 🔴 | 🔴 |
| Snackbar | 🔴 | 🔴 | 🔴 |
| Time picker | 🔴 | 🔴 | 🔴 |
| Tooltip | 🔴 | 🔴 | 🔴 |
| Top app bar | 🔴 | 🔴 | 🔴 |