Get help on Discord

Remove up/down arrows from number field in Sanity Admin

17 replies
Last updated: Jun 8, 2023
How can I remove this up and down arrow from number field in Sanity Admin?
AI Update

Those spinner arrows on number input fields are actually a browser default feature, not something specific to Sanity. The good news is you can hide them using CSS through Sanity Studio's layout customization system.

Here's how to remove them:

1. Create a custom layout file

Create a new file called sanity.extra.tsx (or .jsx if you're not using TypeScript) at the root level of your Studio, next to your sanity.config.ts file:

import React from 'react'
import { createGlobalStyle } from 'styled-components';
import config from './sanity.config';
import { LayoutProps, StudioProvider } from "sanity";

const GlobalStyles = createGlobalStyle`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
`;

const CustomLayout = (props: LayoutProps) => {
  return (
    <StudioProvider config={config}>
      <GlobalStyles />
      {props.renderDefault(props)}
    </StudioProvider>
  );
}

export { CustomLayout }

2. Update your Sanity config

Import the custom layout in your sanity.config.ts and add it to the studio configuration:

import { CustomLayout } from './sanity.extra'

export default defineConfig({
  name: 'default',
  title: 'your-project',
  projectId: 'your-project-id',
  dataset: 'production',
  
  // ... other config
  
  studio: {
    components: {
      layout: CustomLayout,
    },
  },
})

Important note: Make sure your file extension is .tsx or .jsx (not just .ts or .js), since it contains JSX code. This is a common gotcha that can cause confusing error messages!

This approach uses the Studio layout customization feature to inject global CSS that targets the browser's default number input styling. The same technique works for other CSS customizations you might want to make across your Studio.

Show original thread
17 replies
Hello
user S
,
I was a little surprised how this acted, then realized it was the
browser input component causing this issue, not anything overlooked in Sanity.
In fact, there is a fix, and Sanity Studio gives you a way to deploy it. It's quite late, so I'll just give you the recipe -- and sleep well, I think
🙂
First, create a file I call sanity.remediate.ts, beside your sanity.config.ts file in your Studio source, with this content:


import React from 'react'
import { createGlobalStyle } from 'styled-components';
import config from './sanity.config';
import {LayoutProps, StudioProvider} from "sanity";

const GlobalStyles = createGlobalStyle`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
`;

const CustomLayout = (props: LayoutProps) => {
  return (
    <StudioProvider config={config}>
      <GlobalStyles />
      {props.renderDefault(props)}
    </StudioProvider>
  );
}

export { CustomLayout }

Hello
user S
,
I was a little surprised how this acted, then realized it was the
browser input component causing this issue, not anything overlooked in Sanity.
In fact, there is a fix, and Sanity Studio gives you a nice way to deploy it. It's quite late, so I'll just give you the recipe -- and sleep well after this one, I think
🙂
First, create a file I call sanity.extra.tsx, or .jsx if you are not using TypeScript, at top level beside your sanity.config.ts/js file in your Studio source, with this content:


import React from 'react'
import { createGlobalStyle } from 'styled-components';
import config from './sanity.config';
import {LayoutProps, StudioProvider} from "sanity";

const GlobalStyles = createGlobalStyle`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
`;

const CustomLayout = (props: LayoutProps) => {
  return (
    <StudioProvider config={config}>
      <GlobalStyles />
      {props.renderDefault(props)}
    </StudioProvider>
  );
}

export { CustomLayout }
Import it into your sanity.config.ts as follows, then add or add to a studio: object in your defineConfig block, as follows:


import { CustomLayout } from './sanity-extra'

    ....

export default defineConfig({
  name: 'default',
  title: 'yours',
  projectId: 'yours',

     ... etc.

  studio: {
    components: {
      layout: CustomLayout,
    },
  },
})
That does the trick here, and will hope does so for you and others.

Best,
Clive

references, several; this is the most recent, and as the preferred web sources aren't advising:

https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
Awesome. Thanks. Let me try this.
Is this also the technique I can use to change anything CSS-related in the Studio? Got a tip to try to include
[data-ui="Popover"] [data-ui="Container"] {
    max-width: 100% !important;
    width: 30rem !important;
}
to make those very small popups to create new links a bit bigger.

Never got it to work, so tried your version here now. Getting error messages that StudioProvider and GlobalStyles are missing, what am I missing?
Yes same here. Hi
user Q
, I tried to implement as per your suggestions, But it didn't worked. Can you guide here? Thanks in advance.
I have changed number field to text as of now.
hmm, I checked all imports before posting -- and those two are from the main sanity module
Are either of you still on Sanity V2? I'm on V3 for this, and used the same pattern for something else months ago, so it doesn't take latest release of that to have those imports.

Nimish, that's a good idea for workaround, and you might use a validator to assure they are entering a number.

Rune, it might well work, if the import situation clears up. I was doing something like that with attribute selectors before, as you are...
user S
,
user E
, please see just above, but I may have something more for you, if indeed you are trying to do this on legacy Sanity v2.
Here's a V2 doc page explaining how to do it using the 
parts:
system, which exists no longer, but was implemented there.

https://www.sanity.io/v2-docs/styling#overriding-variables-d7f9b5cc2adb
From reading a bit about double-colon (
::
) selectors, I don't think you need the`:root` as they have in the example, because 
input::
and I think the attribute equivalent of the Firefox-commented item are already pseudo-selectors for operating directly on the browser's 
input
element.
So you'd just use the same css block with the file for the 
parts: ( path: )
once again -- all of this agin only if you are on v2 and want to try a method for it.
If so, good fortune, and with others will like to hear what happens, to be sure
🙂
Clive

The css block you'd put in the 
parts: { path: }
file:

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }

Thanks for your reply, but I'm on v3 actually. I'll try again tomorrow!
...I've gone even a bit farther on this for v3 then, taking out my direct inclusion of sanity in package.json, rm node_modules and package-lock.json, and starting again. The patch continues to work, and stops working if I comment it out of config.sanity.ts.
Is it true for both of you that the problem seems to be the import of LayoutProps or StudioProvider failing in the file where CustomLayout is defined? But that's what the test I made here should have validated, as it shows what we expect, that the core sanity module which defines these would be present whether you specified it or not.

The other possibility that occurs to me, if the imports aren't actually a problem, is whether the 
studio:components
block is added into your sanity.config.t/js file in the effective place. That would be at the top level of defineConfig there, as follows below.
You don't need to put it last, but that will help assure it comes at the outer level within the define.

A bit of a mystery, and it's always a bit uncomfortable working around things we can't easily touch, isn't it, but then you'll let me know
🙂
Clive


export default defineConfig({

    ...everything else of your config...

  xxx: {
     ... last previous config block, like plugins at outer level
  },
  studio: {
    components: {
      layout: CustomLayout,
    },
  },
})
Getting error messages like this, and VS Code marks CustomLayout, StudioProvider and GlobalStyles in red.
Ok, that seems a very stra_nge_ error_,_ as no comma (,) should ever be present, or need to be, in a component signature like that.
Can you do two things:
• try changing the name of the file from sanity.extra.ts to sanity.extra.js, start the Studio after, see if ok then
• send as an attachment, so I can see if there are invisible characters in them etc, this actual file sanity.extra.t/js, also your sanity.config.t/js, and your package.json -- all three, thanks
You can PM me these files as attachment, if as often here, any might be full of experiments not for public view
🙂
Thanks, Rune,
Clive
Ah,
user E
,
user S
-- I think I just realized what's going on here, and the fault is mine!
In the instructions, I originally suggested a filename, sanity.extra.t/js. But -- it has to be sanity.extra.tsx or .jsx

It's a file full of React JSX code, where &lt;Components&gt; and any html elements are treated as part of Javascript, so it's going to go badly if Vite etc. thinks it's a regular JS or TS file. If it isn't so marked, it will look like quite errored Javascript.

This then explains that very odd error from Vite -- which could I think very easily have given a much clearer message when its parser fails this way...but such is life, isn't it....

I've fixed the instructions above, but you can just add an 'x' to your sanity.extra filename extension, making it .tsx or .jsx according to whether you're using TypeScript or not.

Let me know that the change solves this for each of you, so that you get the functionality -- thanks
🙂
And Rune, interested in whether that other thing you wanted to try works this way, also....

Best to each,
Clive
Yes, that was it! 😀 File needs to be .tsx.I should have thought of this myself, I’ve had the exact same problem before, but I don’t do much of the frontend stuff myself, so I manage to forget these details. Thanks, now the dialogs for adding links are finally sized normally. (Used to be that I could only see the image and first two letters of each entry
😅
Very glad to hear that, Rune...and yes, it was a kind of head-smack moment here too 🙂
Thanks for verifying,, and glad it's working for what you wanted
🌴🌴
You aren't in the area of Bodø, are you by chance?
Yes, working great now, the very narrow link-dialogs have been annoying for our editors for a long time.I’m in Oslo, far away from Bodø
🙂
Very far 🙂 ... it was just something about your avatar reminded me of a fellow met up there once.
He was s pretty interesting sort, talking with him and his friend one early morning on the docks, but that's a long story. Smiling about Oslo as well; take care...

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?