Material-ui: [Components] supported material-ui components

[mbrookes]

Components

• [ ] [App shortcut icons](https://material.io/guidelines/style/icons.html#icons-app-shortcut-icons)
  
  
  
  • [ ] Icon
  
  
  • [ ] Avatar
  
  
  • [ ] Group avatar
  
  
• [x] [Bottom navigation](https://www.google.com/design/spec/components/bottom-navigation.html) - #3712
• [ ] [Bottom sheets](https://www.google.com/design/spec/components/bottom-sheets.html) - #2126
• [x] [Buttons](http://www.material-ui.com/#/components/buttons)
  
  
  
  • [x] [Flat & raised buttons](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons)
  
  
  • [ ] [Toggle buttons](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
  
  
  • [x] [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons) (Custom Checkbox)
  
  
  • [x] [Dropdown: Mobile: Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons) (DropDownMenu)
  
  
  • [ ] [Dropdown: Mobile: Generic overflow](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Mobile: Segmented](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Mobile: Editable segmented](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Desktop: Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
• [x] [Buttons: Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
  
  
  
  • [x] [Trigger](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [ ] [Toolbar](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [ ] [Speed dial](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions) - #2851
  
  
  • [ ] [Morph](http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [ ] [Full screen](http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
• [X] [Cards](https://www.google.com/design/spec/components/cards.html)
• [x] [Chips](https://www.google.com/design/spec/components/chips.html) - #1119
  
  
  
  • [x] [Standard](https://www.google.com/design/spec/components/chips.html)
  
  
  • [ ] [Contact](https://www.google.com/design/spec/components/chips.html#chips-contact-chips)
  
  
• [x] [Data tables](https://www.google.com/design/spec/components/data-tables.html)
• [x] [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
  
  
  
  • [x] [Alerts](https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts)
  
  
  • [x] [Simple menus](https://www.google.com/design/spec/components/dialogs.html#dialogs-simple-menus) (Menu)
  
  
  • [x] [Simple dialogs](https://www.google.com/design/spec/components/dialogs.html#dialogs-simple-dialogs) (Can be constructed with Dialog and List.)
  
  
  • [x] [Confirmation dialogs](https://www.google.com/design/spec/components/dialogs.html#dialogs-confirmation-dialogs)
  
  
  • [ ] [Full screen dialogs](https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs)
  
  
• [x] [Dividers](https://www.google.com/design/spec/components/dividers.html)
  
  
  
  • [x] [Full bleed](https://www.google.com/design/spec/components/dividers.html#dividers-types-of-dividers)
  
  
  • [x] [Inset](https://www.google.com/design/spec/components/dividers.html#dividers-types-of-dividers)
  
  
• [ ] [Expansion Panels](https://www.google.com/design/spec/components/expansion-panels.html)
• [x] [Grid lists](https://www.google.com/design/spec/components/grid-lists.html)
• [X] [Lists](https://www.google.com/design/spec/components/lists.html)
  
  
  
  • [X] [Single line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [X] [Two line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [X] [Three line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [X] [Avatar](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [X] [Icon](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
• [X] [Lists: Controls](https://www.google.com/design/spec/components/lists-controls.html)
  
  
  
  • [X] [Checkbox](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls) (Primary only)
  
  
  • [X] [Switch](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls) (Toggle)
  
  
  • [ ] [Reorder](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [X] [Expand/collapse](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [ ] [Leave-behinds](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
• [X] [Menus](https://www.google.com/design/spec/components/menus.html)
  
  
  
  • [X] [Button menu](https://www.google.com/design/spec/components/menus.html#menus-usage) (Can be constructed)
  
  
  • [X] [Scrollable](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [X] [Cascade](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [X] [Textfield dropdown](https://www.google.com/design/spec/components/menus.html#menus-behavior) (DropDownMenu)
  
  
  • [X] [Contextual / App bar dropdown](https://www.google.com/design/spec/components/menus.html#menus-usage) (IconMenu)
  
  
  • [X] [Simple menus](https://www.google.com/design/spec/components/menus.html#menus-simple-menus) (Menu)
  
  
• [X] [Pickers](https://www.google.com/design/spec/components/pickers.html)
  
  
  
  • [X] [Date picker](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers)
  
  
  • [X] [Time picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers)
  
  
• [X] [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
  
  
  
  • [X] [Linear](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [X] [Circular](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [ ] [Circular with integration](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [X] [Loading](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
• [X] [Selection controls](https://www.google.com/design/spec/components/selection-controls.html)
  
  
  
  • [X] [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
  
  
  • [X] [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
  
  
  • [X] [Switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
  
  
• [X] [Sliders](https://www.google.com/design/spec/components/sliders.html)
  
  
  
  • [X] [Continuous](https://www.google.com/design/spec/components/sliders.html#sliders-continuous-slider)
  
  
  • [x] [Discrete](https://www.google.com/design/spec/components/sliders.html#sliders-discrete-slider)
  
  
• [X] [Snackbars & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
• [X] [Subheaders](https://www.google.com/design/spec/components/subheaders.html)
  
  
  
  • [X] [List](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
  • [ ] [Grid](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
  • [ ] [Menu](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
• [x] [Steppers](https://www.google.com/design/spec/components/steppers.html) - #2722
  
  
  
  • [x] [Horizontal](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers) - #3132
  
  
  • [x] [Vertical](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers) - #3132
  
  
• [X] [Tabs](https://www.google.com/design/spec/components/tabs.html)
  
  
  
  • [X] [Text](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [x] [Icon](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [x] [Icon and text](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [ ] [Dropdown](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [X] [Overflow pagination](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
• [X] [Text fields](https://www.google.com/design/spec/components/text-fields.html)
  
  
  
  • [X] [Single-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field)
  
  
  • [X] [Multi-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field)
  
  
  • [X] [Full-width](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field)
  
  
  • [ ] [Character counter](https://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter)
  
  
  • [X] [Auto-complete](https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field)
  
  
  • [ ] [Search filter](https://www.google.com/design/spec/components/text-fields.html#text-fields-search-filter)
  
  
  • [x] [Password](https://www.google.com/design/spec/components/text-fields.html#text-fields-password-input)
  
  
• [X] [Toolbars](https://www.google.com/design/spec/components/toolbars.html) (AppBar/Toolbar)
• [X] [Tooltips](https://www.google.com/design/spec/components/tooltips.html) (IconButton & TableHeader only) - #2230
  
  
  
  • [x] [Desktop](https://www.google.com/design/spec/components/tooltips.html#tooltips-tooltips-desktop-)
  
  
  • [x] [Mobile](https://www.google.com/design/spec/components/tooltips.html#tooltips-tooltips-mobile-)
  
  
• [ ] [Widgets](https://material.io/guidelines/components/widgets.html)
  
  
  
  • [ ] [Information widgets](https://material.io/guidelines/components/widgets.html#widgets-types-of-widgets)
  
  
  • [ ] [Collection widgets](https://material.io/guidelines/components/widgets.html#widgets-types-of-widgets)
  
  
  • [ ] [Control widgets](https://material.io/guidelines/components/widgets.html#widgets-types-of-widgets)
  
  

[mbrookes]

Thought it would be interesting to capture which components and their variations are supported by Material-UI - with no assumption that it's planned to support everything!

[eks1985]

@mbrookes, great job! Definitely this checklist is very useful

[yongxu]

This is awesome @mbrookes.
I think it is a good idea to change the docs(the site) components list to this layout too.

[newoga]

Very nice, thanks @mbrookes!

Side note, I'm not sure if we support character counter for TextField yet do we?

[alitaheri]

@mbrookes Thanks a lot, this sure gives a lot of insight :+1: :+1:

[mbrookes]

Thanks @newoga - fixed.

[zachguo]

where's multi-select? #2337

[mbrookes]

@zachguo it comes under Patterns not components, so isn't documented here. Arguably it should be. You can see an example under IconMenu in the docs.

[Simran-B]

The list is not quite up-to-date it seems, the following components exist as far as I can see:

• bottom navigation: http://www.material-ui.com/#/components/bottom-navigation
• text fields > password: http://www.material-ui.com/#/components/text-field
• buttons > toggles:
  
  
  
  • http://www.material-ui.com/#/components/checkbox
  
  
  • http://www.material-ui.com/#/components/radio-button
  
  
  • http://www.material-ui.com/#/components/toggle
  
  

Not sure about chips > contact, the example shows two entries with contact-like images:
http://www.material-ui.com/#/components/chip

[kenjiru]

Looking forward for the Search Filter component implementation.

[mbrookes]

@Simran-B Thanks, I've updated for Bottom Nav and Password. Toggle Buttons are something different (follow the link for the spec), as are contact chips.

[forman]

Are expansion panels already scheduled?

[oliviertassinari]

@mbrookes Would that makes sense to move that list into the documentation? We would get a higher visibility. That would also encourage contributions. I'm not sure, just wondering.

[mbrookes]

@oliviertassinari That's a good idea!

I had suggested to @Shahrukh-Zindani that he could submit a new issue with a revised version to help track what has been migrated to next (we were discussing whether there were any simple components left to migrate), but adding a version of this to one or both docs seems like a good plan.

[TheNoim]

Whats with Buffer and Query mode for Linear Progress. I miss them :( https://material.io/guidelines/components/progress-activity.html#progress-activity-types-of-indicators

[stunaz]

@TheNoim Available in the next branch, see for yourself https://material-ui-1dab0.firebaseapp.com/#/component-demos/progress

[oliviertassinari]

@mbrookes Have added a new documentation section around the completeness of Material-UI in regards of the Specification. Nice initiative 👍 . I'm closing this issue. Now, we can update it from time to time when new features are implemented. Notice that it's covering the next branch.