diff --git a/packages/core/src/components/DateField/DateField.scss b/packages/core/src/components/DateField/DateField.scss
index f7d547d778..0c04b7352d 100644
--- a/packages/core/src/components/DateField/DateField.scss
+++ b/packages/core/src/components/DateField/DateField.scss
@@ -33,6 +33,7 @@ Markup:
 
 Style guide: components.date-field
 */
+
 .ds-c-field--month,
 .ds-c-field--day,
 .ds-c-field--year {
diff --git a/packages/core/src/components/TextField/TextField.example.jsx b/packages/core/src/components/TextField/TextField.example.jsx
index b189a06d1f..7b17065cae 100644
--- a/packages/core/src/components/TextField/TextField.example.jsx
+++ b/packages/core/src/components/TextField/TextField.example.jsx
@@ -11,6 +11,12 @@ ReactDOM.render(
       name="single_example"
       requirementLabel="Optional"
     />
+    <TextField
+      defaultValue="123"
+      label="Number field"
+      name="number_example"
+      type="number"
+    />
     <TextField label="Small size modifier" name="small_example" size="small" />
     <TextField
       label="Medium size modifier"
diff --git a/packages/core/src/components/TextField/TextField.scss b/packages/core/src/components/TextField/TextField.scss
index 4c18026eb3..5639665824 100644
--- a/packages/core/src/components/TextField/TextField.scss
+++ b/packages/core/src/components/TextField/TextField.scss
@@ -41,7 +41,6 @@ Markup:
 Style guide: components.text-field
 */
 
-// input, textarea, select
 .ds-c-field {
   appearance: none;
   border: $input-border-width solid $input-border-color;
@@ -63,6 +62,15 @@ Style guide: components.text-field
   &:focus {
     box-shadow: $focus-shadow;
   }
+
+  &[type='number'] {
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
 }
 
 .ds-c-field--small {