diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
index a56335724980d0..416c04de82d953 100644
--- a/docs/pages/api/autocomplete.md
+++ b/docs/pages/api/autocomplete.md
@@ -55,6 +55,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| inputValue | string | | The input value. |
| ListboxComponent | elementType | 'ul' | The component used to render the listbox. |
| ListboxProps | object | | Props applied to the Listbox element. |
+| ListOptionComponent | elementType | 'li' | The component used to render the list item option. This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering. |
| loading | bool | false | If `true`, the component is in a loading state. |
| loadingText | node | 'Loading…' | Text to display when in a loading state. For localization purposes, you can use the provided [translations](/guides/localization/). |
| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. |
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
index 66a39f1b0be2cd..c8f04aef54e43c 100644
--- a/docs/src/pages/components/autocomplete/Playground.js
+++ b/docs/src/pages/components/autocomplete/Playground.js
@@ -1,7 +1,10 @@
/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
import Autocomplete from '@material-ui/lab/Autocomplete';
+import Info from '@material-ui/icons/Info';
+import Button from '@material-ui/core/Button';
export default function Playground() {
const defaultProps = {
@@ -126,6 +129,36 @@ export default function Playground() {
)}
/>
+ year > 2000}
+ ListOptionComponent={({ title, year, ...props }) => {
+ if (year > 2000) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ );
+ }}
+ renderInput={params => (
+
+ )}
+ />
);
}
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
index 90e798807e3f08..ecb1674a63a44e 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -82,6 +82,12 @@ export interface AutocompleteProps
* Props applied to the Listbox element.
*/
ListboxProps?: object;
+ /**
+ * The component used to render the list item option.
+ *
+ * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering.
+ */
+ ListOptionComponent?: React.ComponentType & T>;
/**
* If `true`, the component is in a loading state.
*/
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index eebefc730138c6..63c22dd860fe45 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -248,6 +248,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
inputValue: inputValueProp,
ListboxComponent = 'ul',
ListboxProps,
+ ListOptionComponent = 'li',
loading = false,
loadingText = 'Loading…',
multiple = false,
@@ -335,6 +336,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
const renderListOption = (option, index) => {
const optionProps = getOptionProps({ option, index });
+ if (ListOptionComponent !== 'li') {
+ return ;
+ }
+
return (
{renderOption(option, {
@@ -613,6 +618,12 @@ Autocomplete.propTypes = {
* Props applied to the Listbox element.
*/
ListboxProps: PropTypes.object,
+ /**
+ * The component used to render the list item option.
+ *
+ * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering.
+ */
+ ListOptionComponent: PropTypes.elementType,
/**
* If `true`, the component is in a loading state.
*/
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 9b2b1e3de4d88f..2851bdbfd2455d 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -858,6 +858,7 @@ export default function useAutocomplete(props) {
return {
key: index,
tabIndex: -1,
+ disabled,
role: 'option',
id: `${id}-option-${index}`,
onMouseOver: handleOptionMouseOver,