diff --git a/lib/cjs/components/form/DateField.js b/lib/cjs/components/form/DateField.js
index 78eefa94..c1060b58 100644
--- a/lib/cjs/components/form/DateField.js
+++ b/lib/cjs/components/form/DateField.js
@@ -39,6 +39,7 @@ var DateField = function (_a) {
     var _f = react_1.default.useState(0), month = _f[0], setMonth = _f[1];
     var _g = react_1.default.useState(0), year = _g[0], setYear = _g[1];
     var _h = react_1.default.useState(true), isDateValid = _h[0], setIsDateValid = _h[1];
+    var menuMaxHeight = 400;
     var fieldConfig = {
         type: 'date',
         name: name,
@@ -99,19 +100,31 @@ var DateField = function (_a) {
                 react_1.default.createElement(material_1.Unstable_Grid2, { xs: 12 },
                     react_1.default.createElement(material_1.FormHelperText, __assign({}, formHelperTextProps), helperText)),
             react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
-                react_1.default.createElement(material_1.Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps),
+                react_1.default.createElement(material_1.Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Day"),
                     dayOptions.map(function (day) {
                         return react_1.default.createElement(material_1.MenuItem, { key: "day-".concat(day), value: day, dense: true }, day);
                     }))),
             react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
-                react_1.default.createElement(material_1.Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps),
+                react_1.default.createElement(material_1.Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Month"),
                     monthOptions.map(function (month, index) {
                         return react_1.default.createElement(material_1.MenuItem, { key: "month-".concat(month), value: index + 1, dense: true }, month);
                     }))),
             react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
-                react_1.default.createElement(material_1.Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps),
+                react_1.default.createElement(material_1.Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Year"),
                     yearOptions.map(function (year) {
                         return react_1.default.createElement(material_1.MenuItem, { key: "year-".concat(year), value: year, dense: true }, year);
diff --git a/lib/esm/components/form/DateField.js b/lib/esm/components/form/DateField.js
index 52927515..44161229 100644
--- a/lib/esm/components/form/DateField.js
+++ b/lib/esm/components/form/DateField.js
@@ -34,6 +34,7 @@ var DateField = function (_a) {
     var _f = React.useState(0), month = _f[0], setMonth = _f[1];
     var _g = React.useState(0), year = _g[0], setYear = _g[1];
     var _h = React.useState(true), isDateValid = _h[0], setIsDateValid = _h[1];
+    var menuMaxHeight = 400;
     var fieldConfig = {
         type: 'date',
         name: name,
@@ -94,19 +95,31 @@ var DateField = function (_a) {
                 React.createElement(Grid, { xs: 12 },
                     React.createElement(FormHelperText, __assign({}, formHelperTextProps), helperText)),
             React.createElement(Grid, { xs: 4 },
-                React.createElement(Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps),
+                React.createElement(Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     React.createElement(MenuItem, { className: 'header', value: 0 }, "Day"),
                     dayOptions.map(function (day) {
                         return React.createElement(MenuItem, { key: "day-".concat(day), value: day, dense: true }, day);
                     }))),
             React.createElement(Grid, { xs: 4 },
-                React.createElement(Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps),
+                React.createElement(Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     React.createElement(MenuItem, { className: 'header', value: 0 }, "Month"),
                     monthOptions.map(function (month, index) {
                         return React.createElement(MenuItem, { key: "month-".concat(month), value: index + 1, dense: true }, month);
                     }))),
             React.createElement(Grid, { xs: 4 },
-                React.createElement(Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps),
+                React.createElement(Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps, { MenuProps: {
+                        style: {
+                            maxHeight: menuMaxHeight
+                        }
+                    } }),
                     React.createElement(MenuItem, { className: 'header', value: 0 }, "Year"),
                     yearOptions.map(function (year) {
                         return React.createElement(MenuItem, { key: "year-".concat(year), value: year, dense: true }, year);
diff --git a/src/components/form/DateField.tsx b/src/components/form/DateField.tsx
index c82b95a7..d1944fac 100644
--- a/src/components/form/DateField.tsx
+++ b/src/components/form/DateField.tsx
@@ -53,6 +53,7 @@ const DateField: React.FC<DateFieldProps> = ({
   const [month, setMonth] = React.useState(0);
   const [year, setYear] = React.useState(0);
   const [isDateValid, setIsDateValid] = React.useState(true);
+  const menuMaxHeight = 400;
 
   const fieldConfig: FieldConfig<Date> = {
     type: 'date',
@@ -141,6 +142,11 @@ const DateField: React.FC<DateFieldProps> = ({
                 value={day}
                 onChange={dispatchSelectChangeEvent(setDay)}
                 {...commonSelectProps}
+                MenuProps={{
+                  style: {
+                    maxHeight: menuMaxHeight
+                  }
+                }}
               >
                 <MenuItem className='header' value={0}>
                   Day
@@ -158,6 +164,11 @@ const DateField: React.FC<DateFieldProps> = ({
                 value={month}
                 onChange={dispatchSelectChangeEvent(setMonth)}
                 {...commonSelectProps}
+                MenuProps={{
+                  style: {
+                    maxHeight: menuMaxHeight
+                  }
+                }}
               >
                 <MenuItem className='header' value={0}>
                   Month
@@ -175,6 +186,11 @@ const DateField: React.FC<DateFieldProps> = ({
                 value={year}
                 onChange={dispatchSelectChangeEvent(setYear)}
                 {...commonSelectProps}
+                MenuProps={{
+                  style: {
+                    maxHeight: menuMaxHeight
+                  }
+                }}
               >
                 <MenuItem className='header' value={0}>
                   Year