diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md
index 9299b16968989b..9df36c85cb0d59 100644
--- a/docs/pages/api-docs/form-control.md
+++ b/docs/pages/api-docs/form-control.md
@@ -50,6 +50,7 @@ You can find one composition example below and more going to [the demos](/compon
| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
| error | bool | false | If `true`, the label should be displayed in an error state. |
+| focused | bool | | If `true`, the component will be displayed in focused state. |
| fullWidth | bool | false | If `true`, the component will take up the full width of its container. |
| hiddenLabel | bool | false | If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element. |
| margin | 'none'
| 'dense'
| 'normal' | 'none' | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts
index 09dca4729f4df2..656e6c04a35002 100644
--- a/packages/material-ui/src/FormControl/FormControl.d.ts
+++ b/packages/material-ui/src/FormControl/FormControl.d.ts
@@ -8,6 +8,7 @@ export interface FormControlTypeMap
disabled?: boolean;
error?: boolean;
fullWidth?: boolean;
+ focused?: boolean;
hiddenLabel?: boolean;
margin?: PropTypes.Margin;
required?: boolean;
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 1e6d750058769a..4512a9741c5f76 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -69,6 +69,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
disabled = false,
error = false,
fullWidth = false,
+ focused: visuallyFocused,
hiddenLabel = false,
margin = 'none',
required = false,
@@ -118,7 +119,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
return initialFilled;
});
- const [focused, setFocused] = React.useState(false);
+ const [_focused, setFocused] = React.useState(false);
+ const focused = visuallyFocused !== undefined ? visuallyFocused : _focused;
if (disabled && focused) {
setFocused(false);
@@ -229,6 +231,10 @@ FormControl.propTypes = {
* If `true`, the label should be displayed in an error state.
*/
error: PropTypes.bool,
+ /**
+ * If `true`, the component will be displayed in focused state.
+ */
+ focused: PropTypes.bool,
/**
* If `true`, the component will take up the full width of its container.
*/
diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js
index 19ee262a20d5b3..cd734bdc08aa10 100644
--- a/packages/material-ui/src/FormControl/FormControl.test.js
+++ b/packages/material-ui/src/FormControl/FormControl.test.js
@@ -109,6 +109,22 @@ describe('