diff --git a/docs/src/modules/components/prism-okaidia.css b/docs/src/modules/components/prism-okaidia.css
index cfa88db339e2a2..230c99474da750 100644
--- a/docs/src/modules/components/prism-okaidia.css
+++ b/docs/src/modules/components/prism-okaidia.css
@@ -145,3 +145,8 @@ pre[class*="language-"] {
 .token.deleted {
   color: rgb(252, 146, 158);
 }
+
+.token.boolean,
+.token.number {
+  color: #b78eff;
+}
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js
index 7740658b7ba8ec..191fb07914c2ac 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.js
+++ b/docs/src/pages/components/autocomplete/Asynchronous.js
@@ -46,6 +46,7 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
+      id="asynchronous-demo"
       style={{ width: 300 }}
       open={open}
       onOpen={() => {
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index e6c3ef888a7305..acd8730746721c 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -50,6 +50,7 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
+      id="asynchronous-demo"
       style={{ width: 300 }}
       open={open}
       onOpen={() => {
diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js
index 609bbeb6c49770..81f00eb8c8e78a 100644
--- a/docs/src/pages/components/autocomplete/CheckboxesTags.js
+++ b/docs/src/pages/components/autocomplete/CheckboxesTags.js
@@ -14,6 +14,7 @@ export default function CheckboxesTags() {
   return (
     <Autocomplete
       multiple
+      id="checkboxes-tags-demo"
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={option => option.title}
diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
index 094d2d0ae4e009..b70923c9c7b5d9 100644
--- a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
+++ b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
@@ -14,6 +14,7 @@ export default function CheckboxesTags() {
   return (
     <Autocomplete
       multiple
+      id="checkboxes-tags-demo"
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option: FilmOptionType) => option.title}
diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index 148045412699c8..eb607b0311571b 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      id="combo-box-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
index 7c124fc5a21248..530aaf5653718a 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      id="combo-box-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       style={{ width: 300 }}
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js
index 7e676a3e25c38e..0aac96dd73bb17 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.js
+++ b/docs/src/pages/components/autocomplete/CountrySelect.js
@@ -27,6 +27,7 @@ export default function CountrySelect() {
 
   return (
     <Autocomplete
+      id="country-select-demo"
       style={{ width: 300 }}
       options={countries}
       classes={{
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx
index 34ef34166b3c93..aa3401e34b1626 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.tsx
+++ b/docs/src/pages/components/autocomplete/CountrySelect.tsx
@@ -27,6 +27,7 @@ export default function CountrySelect() {
 
   return (
     <Autocomplete
+      id="country-select-demo"
       style={{ width: 300 }}
       options={countries}
       classes={{
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
index 086585fde80650..9754d768636f7a 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.js
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    id: 'customized-hook-demo',
     defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
index 6ad762bd6069cf..7063d92a75b993 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    id: 'customized-hook-demo',
     defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js
index 60108c7c1ef9b7..82dba85b2c0c5d 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.js
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.js
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
+      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
index 006a13f9cf1241..ad90d5c6501a4a 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
+      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={(option: TimeSlot) => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}
diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js
index 46e76bf744cae5..2c3c5d6f5d595d 100644
--- a/docs/src/pages/components/autocomplete/Filter.js
+++ b/docs/src/pages/components/autocomplete/Filter.js
@@ -11,6 +11,7 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
+      id="filter-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       filterOptions={filterOptions}
diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx
index 49a973b0b7160e..5e00d3e8af8d62 100644
--- a/docs/src/pages/components/autocomplete/Filter.tsx
+++ b/docs/src/pages/components/autocomplete/Filter.tsx
@@ -11,6 +11,7 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
+      id="filter-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       filterOptions={filterOptions}
diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js
index a4f36edd557489..3039b4801afc52 100644
--- a/docs/src/pages/components/autocomplete/FixedTags.js
+++ b/docs/src/pages/components/autocomplete/FixedTags.js
@@ -8,6 +8,7 @@ export default function FixedTags() {
   return (
     <Autocomplete
       multiple
+      id="fixed-tags-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}
diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx
index 55734b2d2aa989..d655dc23f56606 100644
--- a/docs/src/pages/components/autocomplete/FixedTags.tsx
+++ b/docs/src/pages/components/autocomplete/FixedTags.tsx
@@ -8,6 +8,7 @@ export default function FixedTags() {
   return (
     <Autocomplete
       multiple
+      id="fixed-tags-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js
index d7a32bd5daafba..eca97faea0a224 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.js
+++ b/docs/src/pages/components/autocomplete/FreeSolo.js
@@ -7,6 +7,7 @@ export default function FreeSolo() {
   return (
     <div style={{ width: 300 }}>
       <Autocomplete
+        id="free-solo-demo"
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
@@ -15,6 +16,7 @@ export default function FreeSolo() {
       />
       <Autocomplete
         freeSolo
+        id="free-solo-2-demo"
         disableClearable
         options={top100Films.map(option => option.title)}
         renderInput={params => (
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.tsx b/docs/src/pages/components/autocomplete/FreeSolo.tsx
index d7a32bd5daafba..eca97faea0a224 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSolo.tsx
@@ -7,6 +7,7 @@ export default function FreeSolo() {
   return (
     <div style={{ width: 300 }}>
       <Autocomplete
+        id="free-solo-demo"
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
@@ -15,6 +16,7 @@ export default function FreeSolo() {
       />
       <Autocomplete
         freeSolo
+        id="free-solo-2-demo"
         disableClearable
         options={top100Films.map(option => option.title)}
         renderInput={params => (
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js
index 1e88c3aaaf4bb3..1ef5d1156428ec 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.js
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.js
@@ -87,6 +87,7 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
+      id="google-map-demo"
       style={{ width: 300 }}
       getOptionLabel={option => option.description}
       filterOptions={x => x}
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
index 063303e7dfbc72..96593ab0e23fd1 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -99,6 +99,7 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
+      id="google-map-demo"
       style={{ width: 300 }}
       getOptionLabel={option => option.description}
       filterOptions={x => x}
diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js
index 646328e2cf7602..cf233d53353b0f 100644
--- a/docs/src/pages/components/autocomplete/Grouped.js
+++ b/docs/src/pages/components/autocomplete/Grouped.js
@@ -14,6 +14,7 @@ export default function Grouped() {
 
   return (
     <Autocomplete
+      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={option => option.firstLetter}
       getOptionLabel={option => option.title}
diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx
index bbe6f4e4ef64b4..41294950f531bf 100644
--- a/docs/src/pages/components/autocomplete/Grouped.tsx
+++ b/docs/src/pages/components/autocomplete/Grouped.tsx
@@ -14,6 +14,7 @@ export default function Grouped() {
 
   return (
     <Autocomplete
+      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option: FilmOptionType) => option.firstLetter}
       getOptionLabel={(option: FilmOptionType) => option.title}
diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js
index 72118e30b7b1b4..a886cd6ecc3f4e 100644
--- a/docs/src/pages/components/autocomplete/Highlights.js
+++ b/docs/src/pages/components/autocomplete/Highlights.js
@@ -8,6 +8,7 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
+      id="highlights-demo"
       style={{ width: 300 }}
       options={top100Films}
       getOptionLabel={option => option.title}
diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx
index 4c0dbfb8e84676..47d56b32419ec6 100644
--- a/docs/src/pages/components/autocomplete/Highlights.tsx
+++ b/docs/src/pages/components/autocomplete/Highlights.tsx
@@ -8,6 +8,7 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
+      id="highlights-demo"
       style={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
index e4b2595fc41f66..66a39f1b0be2cd 100644
--- a/docs/src/pages/components/autocomplete/Playground.js
+++ b/docs/src/pages/components/autocomplete/Playground.js
@@ -19,11 +19,13 @@ export default function Playground() {
     <div style={{ width: 300 }}>
       <Autocomplete
         {...defaultProps}
+        id="debug"
         debug
         renderInput={params => <TextField {...params} label="debug" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={params => (
           <TextField {...params} label="disableCloseOnSelect" margin="normal" fullWidth />
@@ -31,6 +33,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="clear-on-escape"
         clearOnEscape
         renderInput={params => (
           <TextField {...params} label="clearOnEscape" margin="normal" fullWidth />
@@ -38,6 +41,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-clearable"
         disableClearable
         renderInput={params => (
           <TextField {...params} label="disableClearable" margin="normal" fullWidth />
@@ -45,6 +49,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="include-input-in-list"
         includeInputInList
         renderInput={params => (
           <TextField {...params} label="includeInputInList" margin="normal" fullWidth />
@@ -52,10 +57,12 @@ export default function Playground() {
       />
       <Autocomplete
         {...flatProps}
+        id="flat-demo"
         renderInput={params => <TextField {...params} label="flat" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="controlled-demo"
         value={value}
         onChange={(event, newValue) => {
           setValue(newValue);
@@ -66,6 +73,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-complete"
         autoComplete
         includeInputInList
         renderInput={params => (
@@ -74,6 +82,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-list-wrap"
         disableListWrap
         renderInput={params => (
           <TextField {...params} label="disableListWrap" margin="normal" fullWidth />
@@ -81,6 +90,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-open-on-focus"
         disableOpenOnFocus
         renderInput={params => (
           <TextField {...params} label="disableOpenOnFocus" margin="normal" fullWidth />
@@ -88,6 +98,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-highlight"
         autoHighlight
         renderInput={params => (
           <TextField {...params} label="autoHighlight" margin="normal" fullWidth />
@@ -95,6 +106,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-select"
         autoSelect
         renderInput={params => (
           <TextField {...params} label="autoSelect" margin="normal" fullWidth />
@@ -102,11 +114,13 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disabled"
         disabled
         renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-portal"
         disablePortal
         renderInput={params => (
           <TextField {...params} label="disablePortal" margin="normal" fullWidth />
diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
index a8b898119f2eb3..84c10ad8768126 100644
--- a/docs/src/pages/components/autocomplete/Playground.tsx
+++ b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -17,11 +17,13 @@ export default function Playground() {
     <div style={{ width: 300 }}>
       <Autocomplete
         {...defaultProps}
+        id="debug"
         debug
         renderInput={params => <TextField {...params} label="debug" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={params => (
           <TextField {...params} label="disableCloseOnSelect" margin="normal" fullWidth />
@@ -29,6 +31,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="clear-on-escape"
         clearOnEscape
         renderInput={params => (
           <TextField {...params} label="clearOnEscape" margin="normal" fullWidth />
@@ -36,6 +39,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-clearable"
         disableClearable
         renderInput={params => (
           <TextField {...params} label="disableClearable" margin="normal" fullWidth />
@@ -43,6 +47,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="include-input-in-list"
         includeInputInList
         renderInput={params => (
           <TextField {...params} label="includeInputInList" margin="normal" fullWidth />
@@ -50,10 +55,12 @@ export default function Playground() {
       />
       <Autocomplete
         {...flatProps}
+        id="flat-demo"
         renderInput={params => <TextField {...params} label="flat" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="controlled-demo"
         value={value}
         onChange={(event, newValue) => {
           setValue(newValue);
@@ -64,6 +71,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-complete"
         autoComplete
         includeInputInList
         renderInput={params => (
@@ -72,6 +80,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-list-wrap"
         disableListWrap
         renderInput={params => (
           <TextField {...params} label="disableListWrap" margin="normal" fullWidth />
@@ -79,6 +88,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-open-on-focus"
         disableOpenOnFocus
         renderInput={params => (
           <TextField {...params} label="disableOpenOnFocus" margin="normal" fullWidth />
@@ -86,6 +96,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-highlight"
         autoHighlight
         renderInput={params => (
           <TextField {...params} label="autoHighlight" margin="normal" fullWidth />
@@ -93,6 +104,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-select"
         autoSelect
         renderInput={params => (
           <TextField {...params} label="autoSelect" margin="normal" fullWidth />
@@ -100,11 +112,13 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disabled"
         disabled
         renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-portal"
         disablePortal
         renderInput={params => (
           <TextField {...params} label="disablePortal" margin="normal" fullWidth />
diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js
index 022e4a2b367936..eb63f556616887 100644
--- a/docs/src/pages/components/autocomplete/Tags.js
+++ b/docs/src/pages/components/autocomplete/Tags.js
@@ -9,6 +9,7 @@ export default function Tags() {
     <div style={{ width: 500 }}>
       <Autocomplete
         multiple
+        id="tags-standard"
         options={top100Films}
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
@@ -25,6 +26,7 @@ export default function Tags() {
       />
       <Autocomplete
         multiple
+        id="tags-outlined"
         options={top100Films}
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
@@ -42,6 +44,7 @@ export default function Tags() {
       />
       <Autocomplete
         multiple
+        id="tags-filled"
         options={top100Films.map(option => option.title)}
         defaultValue={[top100Films[13].title]}
         freeSolo
diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx
index 4f40a7e11cc12c..aaf05e16bab42b 100644
--- a/docs/src/pages/components/autocomplete/Tags.tsx
+++ b/docs/src/pages/components/autocomplete/Tags.tsx
@@ -9,6 +9,7 @@ export default function Tags() {
     <div style={{ width: 500 }}>
       <Autocomplete
         multiple
+        id="tags-standard"
         options={top100Films}
         getOptionLabel={(option: FilmOptionType) => option.title}
         defaultValue={[top100Films[13]]}
@@ -25,6 +26,7 @@ export default function Tags() {
       />
       <Autocomplete
         multiple
+        id="tags-outlined"
         options={top100Films}
         getOptionLabel={(option: FilmOptionType) => option.title}
         defaultValue={[top100Films[13]]}
@@ -42,6 +44,7 @@ export default function Tags() {
       />
       <Autocomplete
         multiple
+        id="tags-filled"
         options={top100Films.map(option => option.title)}
         defaultValue={[top100Films[13].title]}
         freeSolo
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js
index d71b91556972ba..14f82a5d2f6fbe 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.js
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js
@@ -43,6 +43,7 @@ export default function UseAutocomplete() {
     getOptionProps,
     groupedOptions,
   } = useAutocomplete({
+    id: 'use-autocomplete-demo',
     options: top100Films,
     getOptionLabel: option => option.title,
   });
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
index 726da2a8b96baf..c7bfa1a01e3335 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
@@ -45,6 +45,7 @@ export default function UseAutocomplete() {
     getOptionProps,
     groupedOptions,
   } = useAutocomplete({
+    id: 'use-autocomplete-demo',
     options: top100Films,
     getOptionLabel: option => option.title,
   });
diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js
index d5a96a0cb14305..fc5661a87b8b13 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.js
+++ b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -75,6 +75,7 @@ export default function Virtualize() {
 
   return (
     <Autocomplete
+      id="virtualize-demo"
       style={{ width: 300 }}
       disableListWrap
       classes={classes}
diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index cc801469898e03..e9c9580cde70d8 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -79,6 +79,7 @@ export default function Virtualize() {
 
   return (
     <Autocomplete
+      id="virtualize-demo"
       style={{ width: 300 }}
       disableListWrap
       classes={classes}
diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
index 6615ee4eb5222f..a25b409c0d272a 100644
--- a/docs/src/pages/components/autocomplete/autocomplete.md
+++ b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -9,7 +9,7 @@ components: TextField, Popper, Autocomplete
 
 The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:
 
-1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox).
+1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box).
 2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo).
 
 ## Combo box
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
index ba1c60077be325..18c1b41f95a853 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -23,6 +23,7 @@ export interface RenderGroupParams {
 }
 
 export interface RenderInputParams {
+  id: string;
   disabled: boolean;
   InputLabelProps: object;
   InputProps: {
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 634248c445b84b..3b1fe036856910 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -224,6 +224,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     getOptionProps,
     value,
     dirty,
+    id,
     popupOpen,
     focused,
     focusedTag,
@@ -290,6 +291,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
         {...other}
       >
         {renderInput({
+          id,
           disabled,
           InputLabelProps: getInputLabelProps(),
           InputProps: {
@@ -301,6 +303,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                 {disableClearable || disabled ? null : (
                   <IconButton
                     {...getClearProps()}
+                    aria-label="Clear"
                     title="Clear"
                     className={clsx(classes.clearIndicator, {
                       [classes.clearIndicatorDirty]: dirty,
@@ -314,6 +317,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                   <IconButton
                     {...getPopupIndicatorProps()}
                     disabled={disabled}
+                    aria-label={popupOpen ? 'Close popup' : 'Open popup'}
                     title={popupOpen ? 'Close popup' : 'Open popup'}
                     className={clsx(classes.popupIndicator, {
                       [classes.popupIndicatorOpen]: popupOpen,
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 5de91aaa427c7f..a2438ff60e2f5c 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -720,6 +720,7 @@ export default function useAutocomplete(props) {
     }),
     getInputLabelProps: () => ({
       id: `${id}-label`,
+      htmlFor: id,
     }),
     getInputProps: () => ({
       id,
@@ -732,11 +733,11 @@ export default function useAutocomplete(props) {
       // only have an opinion about this when closed
       'aria-activedescendant': popupOpen ? undefined : null,
       'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': `${id}-popup`,
-      // autoComplete: 'off', // Disable browser's suggestion that might overlap with the popup.
-      autoComplete: 'disabled', // disable autocomplete and autofill
+      'aria-controls': popupOpen ? `${id}-popup` : null,
+      // Disable browser's suggestion that might overlap with the popup.
+      // (autocomplete and autofill)
+      autoComplete: 'disabled',
       ref: inputRef,
-      autoCorrect: 'off',
       autoCapitalize: 'none',
       spellCheck: 'false',
     }),