Repository: material-ui
Issue: Adopt Material Design 3 / Material You
Labels: new feature,design: material,umbrella,on hold,breaking change,design: material you

I'm sure you're tracking the pulse of material design standards like me and others. That being said, material ui version 3 is out.

We should track MUI being migrated from Material Design v2 to Material Design version v3.

I'm sure they'll be a few tickets that come out requesting the adoption, so I figured this ticket could act as a stub and catch-all for MUI support for the design language's latest update.

Cheers

### References

- MD 3 Docs https://m3.material.io/
- MD 2 Docs https://m2.material.io/
- Ionic's discussion on the problem https://github.com/ionic-team/ionic-framework/issues/24282
- Vuetify's discussion on the problem https://github.com/vuetifyjs/vuetify/issues/14332
- Quasar's discussion on the problem https://github.com/quasarframework/quasar/issues/11139
- Google's discussion on the problem https://github.com/material-components/material-web/issues/2441
- The docs traffic on MD 3 vs MD 2: https://www.similarweb.com/website/m3.material.io/?competitors=material.io 
- Material Design traction on Figma [MD 2 Figma file](https://www.figma.com/community/file/778763161265841481) vs. [MD 3 Figma file](https://www.figma.com/community/file/1035203688168086460)
  - January 12, 2022: MD2 4.8k stars 256k copies, MD3 1.9k stars 39.6k copies
  - March 24, 2022: MD2 5.6k stars 277k copies, MD3 4.2k stars 91k copies
  - August 23, 2022: MD2 6.5k stars 307k copies, MD3 5.8k stars 132k copies
  - October 6, 2022: MD2 6.8k stars 315k copies, MD3 6.6k stars 155k copies
  - December 20, 2022: MD2 7.2k stars 327k copies, MD3 8.9k stars 214k copies
- React Native Paper: https://github.com/callstack/react-native-paper/issues/3126
- Flutter https://github.com/flutter/flutter/issues/103537
- Angular Material: https://github.com/angular/components/issues/22738

### Design kits

- https://github.com/mui/mui-design-kits/issues/135
- https://github.com/mui/mui-design-kits/issues/103

### Real adoptions of Material You in the wild?

**Desktop**

- https://relay.material.io/
- https://httpie.io/app feels inspired by it
- Gmail partially, which feels relatively yolo
- Others?

**Mobile**

- Google Pixel Phones. "Canalys puts Google fifth in U.S. phone market share, with just a 1.7% in Q3 2022." [source](https://www.tomsguide.com/news/google-pixel-7-is-a-great-phone-so-why-arent-more-people-buying-it). It's insignificant. All the other phone manufacturers skin Android, so don't use Material Design 3.
- Others?

## Migration

If you wish to contribute, start with the [contributing guide](https://github.com/mui/material-ui/blob/master/packages/mui-material-next/CONTRIBUTING.md)


### Progress
List of components and their current migration status
<details>
  <summary><b>✅ Done</b></summary>

- [x]  Badges: [Playground](https://mui.com/material-ui/react-badge/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/37835) | [Specs](https://m3.material.io/components/badges/overview)
- [x]  Chips: [Playground](https://mui.com/material-ui/react-chip/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/38024) | [Specs](https://m3.material.io/components/chips/overview)
- [x] Circular Progress Indicator: [Playground](https://mui.com/material-ui/react-progress/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39770) | [Specs](https://m3.material.io/components/progress-indicators/overview)
- [x]  Common Buttons: [Playground](https://mui.com/material-ui/react-button/#material-you-version) | [Issue](https://github.com/mui/material-ui/pull/34650) | [Specs](https://m3.material.io/components/buttons/overview)
- [x]  Dividers: [Playground](https://mui.com/material-ui/react-divider/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39007) | [Specs](https://m3.material.io/components/divider/overview)
- [x]  Linear Progress Indicator: [Playground](https://mui.com/material-ui/react-progress/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39778) | [Specs](https://m3.material.io/components/progress-indicators/overview)
- [x]  Sliders: [Playground](https://mui.com/material-ui/react-slider/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/37527) | [Specs](https://m3.material.io/components/sliders/overview)
</details>

<details>
  <summary><b>⏳ In progress</b></summary>

- [ ] List: [Issue](https://github.com/mui/material-ui/issues/40368) | [Specs](https://m3.material.io/components/lists/overview)
- [ ]  Menu: [Issue](https://github.com/mui/material-ui/issues/39521) | [Specs](https://m3.material.io/components/menus/overview)
- [ ]  Select: [Issue](https://github.com/mui/material-ui/issues/38972) | [Specs](https://m3.material.io/components/menus/specs)
- [ ] Snackbar: [Issue](https://github.com/mui/material-ui/issues/39207) | [Specs](https://m3.material.io/components/snackbar/overview)
- [ ] Switch: [Issue](https://github.com/mui/material-ui/issues/39886) | [Specs](https://m3.material.io/components/switch/overview)
- [ ]  TextField: [Issue](https://github.com/mui/material-ui/issues/38374) | [Specs](https://m3.material.io/components/text-fields/overview)
    - [x] InputBase: https://github.com/mui/material-ui/issues/38372
    - [x] FormControl: https://github.com/mui/material-ui/issues/38411
- [ ] Buttons
    - [ ] Button Group (named Segmented Button in the specs): [Issue](https://github.com/mui/material-ui/issues/39686) |  [Specs](https://m3.material.io/components/segmented-buttons/overview)
    - [ ] Icon Button: [Issue](https://github.com/mui/material-ui/issues/39943) | [Specs](https://m3.material.io/components/icon-buttons/overview)
</details>



<details>
  <summary><b>⭐ Ready to take</b></summary>

- [ ]  [Bottom App Bar](https://m3.material.io/components/bottom-app-bar/overview) (Previously included in App Bar)
- [ ]  [Bottom Sheet](https://m3.material.io/components/bottom-sheets/overview) (Previously included in Drawer)
- [ ]  [Buttons](https://m3.material.io/components/all-buttons):
    - [ ] [FAB](https://m3.material.io/components/floating-action-button/overview)
    - [ ] [Extended FAB](https://m3.material.io/components/extended-fab/overview)
- [ ]  [Card](https://m3.material.io/components/cards/overview)
- [ ]  [Dialog](https://m3.material.io/components/dialogs/overview)
- [ ]  [Navigation Bar](https://m3.material.io/components/navigation-bar/overview) (Previously named Bottom Navigation)
- [ ]  [Navigation Drawer](https://m3.material.io/components/navigation-drawer/overview) (Previously included in Drawer)
- [ ]  [Navigation Rail](https://m3.material.io/components/navigation-rail/overview) (Previously Drawer “Mini” variant)
- [ ]  [Search](https://m3.material.io/components/search/overview) (New component)
- [ ]  [Side sheet](https://m3.material.io/components/side-sheets/overview) (Previously included in Drawer)
- [ ]  [Tab](https://m3.material.io/components/tabs/overview)
- [ ]  [Top App Bar](https://m3.material.io/components/top-app-bar/overview) (Previously included in App Bar)
- [ ]  [Typography](https://m3.material.io/styles/typography/overview)
</details>

<details>
  <summary><b>✋🏼 On hold</b></summary>

- Blocked
    - [ ]  Autocomplete: [Issue](https://github.com/mui/material-ui/issues/39963) | [Specs](https://m3.material.io/components/menus/specs)
- Waiting for Base UI’s hook:
    - [ ]  [Checkbox](https://m3.material.io/components/checkbox/overview)
    - [ ]  [Radio Button](https://m3.material.io/components/radio-button/overview)
    - [ ]  [Tooltips](https://m3.material.io/components/tooltips/overview)
</details>