Skip to content

Input: Hide native spin controls for type="number" #80646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 6 commits into from
Jul 24, 2026
Merged

Input: Hide native spin controls for type="number" #80646

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1424a60
Hide native spin controls on number Input by default.
mirka Jul 23, 2026
40f7656
Add changelog
mirka Jul 23, 2026
7280826
Simplify
mirka Jul 23, 2026
5d9a985
Simplify changelog
mirka Jul 23, 2026
9640a38
Use unprefixed appearance on number spin pseudo-elements.
mirka Jul 23, 2026
c121d9e
Merge branch 'trunk' into ui/input-control-hide-number-spin-controls
aduth Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancements

- `Input`: Hide native browser spin controls for `type="number"` inputs by default ([#80646](https://github.com/WordPress/gutenberg/pull/80646)).
- Add `Autocomplete.Row` primitive ([#80490](https://github.com/WordPress/gutenberg/pull/80490)).
- `Combobox`, `Select`, `SelectControl`: Add `Group` and `GroupLabel` subcomponents ([#80574](https://github.com/WordPress/gutenberg/pull/80574)).
- `Popover`: Default the popup's portal container to the `@wordpress/ui` compat overlay slot when present, so popovers stack reliably above other overlays in mixed-library compositions. A caller-supplied `Popover.Portal` `container` prop continues to take precedence ([#80278](https://github.com/WordPress/gutenberg/pull/80278)).
Expand Down
63 changes: 25 additions & 38 deletions packages/ui/src/form/input-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,44 +119,31 @@ export const NumberWithSteppers: Story = {
const [ value, setValue ] = useState( 0 );

return (
<>
<style>
{ `
.my-number-with-steppers input[type='number'] {
-moz-appearance: textfield;
}
.my-number-with-steppers ::-webkit-inner-spin-button {
appearance: none;
}
` }
</style>
<InputControl
{ ...args }
value={ value }
onValueChange={ ( v ) => setValue( parseInt( v, 10 ) ) }
className="my-number-with-steppers"
suffix={
<InputLayout.Slot padding="minimal">
<Stack direction="row" gap="xs">
<IconButton
label="Increment"
icon={ plus }
onClick={ () => setValue( value + 1 ) }
size="small"
variant="minimal"
/>
<IconButton
label="Decrement"
icon={ reset }
onClick={ () => setValue( value - 1 ) }
size="small"
variant="minimal"
/>
</Stack>
</InputLayout.Slot>
}
/>
</>
<InputControl
{ ...args }
value={ value }
onValueChange={ ( v ) => setValue( parseInt( v, 10 ) ) }
suffix={
<InputLayout.Slot padding="minimal">
<Stack direction="row" gap="xs">
<IconButton
label="Increment"
icon={ plus }
onClick={ () => setValue( value + 1 ) }
size="small"
variant="minimal"
/>
<IconButton
label="Decrement"
icon={ reset }
onClick={ () => setValue( value - 1 ) }
size="small"
variant="minimal"
/>
</Stack>
</InputLayout.Slot>
}
/>
);
},
args: {
Expand Down
10 changes: 10 additions & 0 deletions packages/ui/src/form/primitives/input/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@
&[type="url"] {
direction: ltr; /* maintain LTR in RTL languages */
}

&[type="number"] {
appearance: textfield;

@mirka mirka Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching these to unprefixed appearance.

@aduth aduth Jul 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's rather incidental to this pull request, but this got me wondering what we plan to do with [type="search"] ? It's a similar sort of browser-native suffix control that can be eliminated through appearance: textfield, but also I know with SearchControl we retain it, albeit with a custom button.

@mirka mirka Jul 24, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. I think for SearchControl we will continue having a dedicated component in the wp-ui package, rather than having people use type="search".


&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
margin: 0;

@mirka mirka Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure if the margin is still needed 🤔 Leaving in for good measure.

}
}
}
}
}
Loading