Form 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.

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

In addition to the shared properties (above), input components have the following:

In addition to the shared properties (above), array item components have the following:

In addition to the shared properties (above), field components have the following:

In addition to the shared properties (above), list preview components have the following: