diff --git a/src/Input/InputLabel.js b/src/Input/InputLabel.js
index 81c5fabbe6564d..adab58a5d47b17 100644
--- a/src/Input/InputLabel.js
+++ b/src/Input/InputLabel.js
@@ -18,6 +18,10 @@ export const styles = (theme: Object) => ({
// slight alteration to spec spacing to match visual spec result
transform: `translate(0, ${theme.spacing.unit * 3 - 1}px) scale(1)`,
},
+ // Compensation for the `Input.inputDense` style.
+ labelDense: {
+ transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`,
+ },
shrink: {
transform: 'translate(0, 1.5px) scale(0.75)',
transformOrigin: 'top left',
@@ -68,6 +72,11 @@ export type Props = {
* If `true`, the input of this label is focused.
*/
focused?: boolean,
+ /**
+ * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+ * FormControl.
+ */
+ margin?: 'dense',
/**
* if `true`, the label will indicate that the input is required.
*/
@@ -88,6 +97,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
classes,
className: classNameProp,
shrink: shrinkProp,
+ margin: marginProp,
...other
} = props;
@@ -98,6 +108,11 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
shrink = muiFormControl.dirty || muiFormControl.focused;
}
+ let margin = marginProp;
+ if (typeof margin === 'undefined' && muiFormControl) {
+ margin = muiFormControl.margin;
+ }
+
const className = classNames(
classes.root,
{
@@ -105,6 +120,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
[classes.animated]: !disableAnimation,
[classes.shrink]: shrink,
[classes.disabled]: disabled,
+ [classes.labelDense]: margin === 'dense',
},
classNameProp,
);
diff --git a/src/Input/InputLabel.spec.js b/src/Input/InputLabel.spec.js
index 82a78f5bee59a2..c780866fd6f5ad 100644
--- a/src/Input/InputLabel.spec.js
+++ b/src/Input/InputLabel.spec.js
@@ -53,6 +53,12 @@ describe('