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.
Tip: Check out the quick start guide to jump in.
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 features are planned for a future release.
| 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 | ❌ | ❌ | ❌ |