Skip to content

Commit 3c6e550

Browse files
asynclizcopybara-github
authored andcommitted
feat(textfield): add no-spinner to remove number spin buttons
PiperOrigin-RevId: 595788647
1 parent 553aaa6 commit 3c6e550

File tree

2 files changed

+18
-0
lines changed

2 files changed

+18
-0
lines changed

textfield/internal/_input.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,18 @@
4343
}
4444
}
4545

46+
// Optionally remove number input's spinner
47+
.no-spinner .input {
48+
&::-webkit-inner-spin-button,
49+
&::-webkit-outer-spin-button {
50+
display: none;
51+
}
52+
53+
&[type='number'] {
54+
-moz-appearance: textfield;
55+
}
56+
}
57+
4658
:focus-within .input {
4759
caret-color: var(--_focus-caret-color);
4860
}

textfield/internal/text-field.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,11 @@ export abstract class TextField extends textFieldBaseClass {
226226
*/
227227
@property({type: Number}) minLength = -1;
228228

229+
/**
230+
* When true, hide the spinner for `type="number"` text fields.
231+
*/
232+
@property({type: Boolean, attribute: 'no-spinner'}) noSpinner = false;
233+
229234
/**
230235
* A regular expression that the text field's value must match to pass
231236
* constraint validation.
@@ -514,6 +519,7 @@ export abstract class TextField extends textFieldBaseClass {
514519
'disabled': this.disabled,
515520
'error': !this.disabled && this.hasError,
516521
'textarea': this.type === 'textarea',
522+
'no-spinner': this.noSpinner,
517523
};
518524

519525
return html`

0 commit comments

Comments
 (0)