feat(textfield): add no-spinner to remove number spin buttons

PiperOrigin-RevId: 595788647
material-components · Jan 4, 2024 · 3c6e550 · 3c6e550
1 parent 553aaa6
commit 3c6e550
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/textfield/internal/_input.scss b/textfield/internal/_input.scss
@@ -43,6 +43,18 @@
     }
   }
 
+  // Optionally remove number input's spinner
+  .no-spinner .input {
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      display: none;
+    }
+
+    &[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
+
   :focus-within .input {
     caret-color: var(--_focus-caret-color);
   }

diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
@@ -226,6 +226,11 @@ export abstract class TextField extends textFieldBaseClass {
    */
   @property({type: Number}) minLength = -1;
 
+  /**
+   * When true, hide the spinner for `type="number"` text fields.
+   */
+  @property({type: Boolean, attribute: 'no-spinner'}) noSpinner = false;
+
   /**
    * A regular expression that the text field's value must match to pass
    * constraint validation.
@@ -514,6 +519,7 @@ export abstract class TextField extends textFieldBaseClass {
       'disabled': this.disabled,
       'error': !this.disabled && this.hasError,
       'textarea': this.type === 'textarea',
+      'no-spinner': this.noSpinner,
     };
 
     return html`