diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md
index cada927311c2c0..2b7dc58e2a14d5 100644
--- a/docs/pages/api-docs/autocomplete.md
+++ b/docs/pages/api-docs/autocomplete.md
@@ -50,6 +50,7 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
| filterSelectedOptions | bool | false | If `true`, hide the selected options from the list box. |
| forcePopupIcon | 'auto'
| bool | 'auto' | Force the visibility display of the popup icon. |
| freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
+| fullWidth | bool | false | If `true`, the input will take up the full width of its container. |
| getLimitTagsText | func | (more) => `+${more}` | The label to display when the tags are truncated (`limitTags`).
**Signature:**
`function(more: number) => ReactNode`
*more:* The number of truncated tags. |
| getOptionDisabled | func | | Used to determine the disabled state for a given option. |
| getOptionLabel | func | (x) => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
@@ -93,6 +94,7 @@ Any other props supplied will be provided to the root element (native element).
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| root | .MuiAutocomplete-root | Styles applied to the root element.
+| fullWidth | .MuiAutocomplete-fullWidth | Styles applied to the root element if `fullWidth={true}`.
| focused | .Mui-focused | Pseudo-class applied to the root element if focused.
| tag | .MuiAutocomplete-tag | Styles applied to the tag elements, e.g. the chips.
| tagSizeSmall | .MuiAutocomplete-tagSizeSmall | Styles applied to the tag elements, e.g. the chips if `size="small"`.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
index d5a61410dd626a..c49a4a584fb993 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -84,6 +84,10 @@ export interface AutocompleteProps
* Force the visibility display of the popup icon.
*/
forcePopupIcon?: true | false | 'auto';
+ /**
+ * If `true`, the input will take up the full width of its container.
+ */
+ fullWidth?: boolean;
/**
* The label to display when the tags are truncated (`limitTags`).
*
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 1c024954e11522..6234cba2f21941 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -20,6 +20,10 @@ export const styles = (theme) => ({
visibility: 'visible',
},
},
+ /* Styles applied to the root element if `fullWidth={true}`. */
+ fullWidth: {
+ width: '100%',
+ },
/* Pseudo-class applied to the root element if focused. */
focused: {},
/* Styles applied to the tag elements, e.g. the chips. */
@@ -256,6 +260,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
filterSelectedOptions = false,
forcePopupIcon = 'auto',
freeSolo = false,
+ fullWidth = false,
getLimitTagsText = (more) => `+${more}`,
getOptionDisabled,
getOptionLabel = (x) => x,
@@ -389,6 +394,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
classes.root,
{
[classes.focused]: focused,
+ [classes.fullWidth]: fullWidth,
[classes.hasClearIcon]: hasClearIcon,
[classes.hasPopupIcon]: hasPopupIcon,
},
@@ -610,6 +616,10 @@ Autocomplete.propTypes = {
* If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
*/
freeSolo: PropTypes.bool,
+ /**
+ * If `true`, the input will take up the full width of its container.
+ */
+ fullWidth: PropTypes.bool,
/**
* The label to display when the tags are truncated (`limitTags`).
*
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index a2370f367739ed..4c5ef3ae40633e 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -1512,4 +1512,20 @@ describe('', () => {
expect(options).to.have.length(3);
});
});
+
+ describe('prop: fullWidth', () => {
+ it('should have the fullWidth class', () => {
+ const { container } = render(
+ }
+ value={null}
+ />,
+ );
+
+ expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.fullWidth);
+ });
+ });
});