StudioLast updated May 1, 2025

Form Components

The Form Components API will let you override default form widgets with your own custom components.

The following components are available for customization:

// ./sanity.config.js

export default defineConfig({
  // rest of config ...
  form: {
    components: {
      field: MyCustomField,
      input: MyCustomInput,
      item: MyCustomItem,
      preview: MyCustomPreview,
    },
  },
})

For a description of how these different components map to the different parts of a form field, visit the Form Components article.

Custom form components can be declared either at the configuration level, i.e. either in defineConfig or definePlugin, or in a schema. Components added at configuration level will affect all forms in the studio while components added to a schema will only affect the field or fields specified in that schema.

// ./schemas/myDocument.jsx

import {defineType} from 'sanity'

function MyStringInput(props) {
  return (
    <div style={{border: '4px solid magenta'}}>
      {props.renderDefault(props)}
    </div>
  )
}

const myDocument = defineType({
  name: 'myDocument',
  type: 'myDocument',
  title: 'My document',
  fields: [
    {
      name: 'myTitle',
      type: 'string',
      title: 'My title',
      components: {input: MyStringInput},
    },
  ],
})

All form components receive the renderDefault method which will defer to the default studio rendering of the component when called with the component's props.

renderDefaultfunction
A callback function that renders the default layout component. The function takes the component's properties as an argument, and these properties can be modified.

In addition, each form component receives a set of props that varies in shape depending on the type of field they are assigned to.