Re-enable browser autocomplete on Studio fields

Turn native browser autocomplete back on for Studio form fields, on a single field or across the whole studio, by overriding autoComplete in the input's elementProps.

Starting with Studio v6.2.0, Studio sets autoComplete: 'off' on form inputs, so password manager and browser suggestion overlays don't cover the fields editors are working in. Some editors rely on the browser to suggest text they've typed before, for example when they enter the same text repeatedly in a language they don't know.

There's no configuration option to turn autocomplete back on. This guide shows how to override autoComplete in the elementProps that Studio passes to each input, either for a single field or for the whole studio.

• Sanity Studio v6.2.0 or later.
• Familiarity with custom input components and renderDefault. See Form components.

Add a custom input component to the field. The component spreads the existing props, overrides autoComplete in elementProps, and renders the default input with renderDefault:

import {defineField, defineType} from 'sanity'

export const postType = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      components: {
        input: (props) =>
          props.renderDefault({
            ...props,
            elementProps: {...props.elementProps, autoComplete: 'on'},
          }),
      },
    }),
  ],
})

Studio renders the field's input with autocomplete="on", and the browser offers suggestions again. Add the same component to each field where editors want suggestions.

To apply the override to every input in the studio, register it at form.components.input in your studio configuration. The as InputProps assertion is required: InputProps is a union of every input type, and TypeScript can't match the spread object back to one member of it.

import {defineConfig, type InputProps} from 'sanity'

function AllowAutocomplete(props: InputProps) {
  return props.renderDefault({
    ...props,
    elementProps: {...props.elementProps, autoComplete: 'on'},
  } as InputProps)
}

export default defineConfig({
  // ...
  form: {
    components: {
      input: AllowAutocomplete,
    },
  },
})