Get help on Discord

Remove up/down arrows from number field in Sanity Admin

17 replies
Last updated: Nov 29, 2025
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

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?