Get help on Discord

How to disable autocomplete for an input field in Sanity schema?

8 replies
Last updated: Apr 13, 2023
Hello all 👋 Apologies if this has been asked an answered. I couldn't find any conversations via search.
We'd like to disable autocomplete for an input field in our doc, but not sure how to enable in the schema. Example with html in vid below.
AI Update

Based on the documentation, you can disable autocomplete by creating a custom input component that wraps a standard HTML input with the autocomplete="off" attribute.

Here's how to do it:

Create a Custom Input Component

First, create a custom input component file (e.g., NoAutocompleteInput.tsx):

import { StringInputProps, set, unset } from 'sanity'
import { Stack, TextInput } from '@sanity/ui'

export function NoAutocompleteInput(props: StringInputProps) {
  const { value, onChange, elementProps } = props
  
  return (
    <Stack space={3}>
      <TextInput
        {...elementProps}
        value={value || ''}
        onChange={(event) => {
          const newValue = event.currentTarget.value
          onChange(newValue ? set(newValue) : unset())
        }}
        // Add the autocomplete attribute here
        autoComplete="off"
      />
    </Stack>
  )
}

If you need to use a raw HTML input instead of Sanity UI's TextInput, you can do:

export function NoAutocompleteInput(props: StringInputProps) {
  const { value, onChange, elementProps } = props
  
  return (
    <input
      {...elementProps}
      type="text"
      value={value || ''}
      autoComplete="off"
      onChange={(event) => {
        const newValue = event.currentTarget.value
        onChange(newValue ? set(newValue) : unset())
      }}
    />
  )
}

Apply to Your Schema

Then in your schema, use the components.input property to override the default input:

import { NoAutocompleteInput } from './NoAutocompleteInput'

export default {
  name: 'myDocument',
  type: 'document',
  fields: [
    {
      name: 'myField',
      type: 'string',
      components: {
        input: NoAutocompleteInput
      }
    }
  ]
}

This approach leverages Sanity's custom input components feature, which allows you to create React-based replacements for the default form inputs. Your custom component receives props like value and onChange, and you can render any HTML attributes you need (including autocomplete, data-* attributes, or any other HTML attribute).

The key is that custom input components give you full control over the rendered HTML while still integrating properly with Sanity's form system, validation, and real-time collaboration features. You can read more about creating your first input component in this guide.

Show original thread
8 replies
I think the only way to do this interesting enough is to create a custom field component using sanitys official component lib https://www.sanity.io/ui/docs/primitive/text-input in here you can set the change event to return nothing. should block autocomplete I think.
how to set the component in your scheme ^
ah, ok. Was hoping it was an option I was missing 🙂 Thank you!
yeah im not seeing in options or validation where that would be set.
What does the schema look like for this field?
user M

    {
      title: "Headline",
      name: "headline",
      type: "string",
      validation: (Rule) => Rule.required(),
    },

user J
user M
User @ Sanity support recommended this approach, seems to work as designed:
import { useEffect, useRef } from "react";
import { InputProps, isStringInputProps } from "sanity";
/**
 * Disable autocomplete in all string inputs
 * If necessary, customize to target other form inputs
 *
 * Used in `sanity.config.ts` as:
 *
 * ```ts
 * form: {
 *   components: {
 *     input: FormInput
 *   }
 * }
 *
*/
export function FormInput(props: InputProps) {
/**
* Pass a reference to the input
* @see
https://react.dev/learn/manipulating-the-dom-with-refs */
const ref = useRef&lt;HTMLInputElement&gt;(null);
props.elementProps.ref = ref;
useEffect(() =&gt; {
/**
* After rendering, update the input's 
autocomplete
attribute * NOTE: this assertion will match both 
string
and 
text
typed fields */
if (
ref.current
&amp;&amp; ref.current.autocomplete != "off"
&amp;&amp; isStringInputProps(props)
) {
ref.current.autocomplete = "off"
}
}, [props, ref.current?.autocomplete])
return props.renderDefault(props);
}```

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?