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