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},
    },
  ],
})

Shared Properties

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.

Input components

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

Properties

Array item components

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

Properties

Field components

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

Properties

List preview components

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

Properties

Diff components

Coming.

Was this article helpful?