How to disable autocomplete for an input field in Sanity schema?
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 thread8 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.