😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Custom Input: Placeholder

By Arnas Z

Simple Placeholder Custom Input utilising Sanity UI.

/src/Placeholder.js

import React from 'react'

import { Stack, Heading } from '@sanity/ui'

const Placeholder = React.forwardRef((props, _ref) => {
    return (
      <Stack space={2}>
        <Heading as='h3' size={0}>{props.type.title}</Heading>
      </Stack>
    )
  }
)

export default Placeholder

/schemas/test.js

import Placeholder from '../src/Placeholder'

export default {
  name: 'test',
  title: 'Test Document',
  type: 'document',
  fields: [
    {
      name: 'contentBlocks',
      title: 'Content Blocks',
      type: 'array',
      of: [
        {
          name: 'placeholder',
          title: 'Placeholder',
          type: 'string',
          inputComponent: Placeholder,
        },
      ],
    },
  ],
  preview: {
    select: {},
    prepare() {
      return { title: 'Test Document' }
    }
  },
}

When defining an array of different fields for content blocks we often need a simple placeholder field acting as id-only and containing no actual input.

Using Sanity Custom Input Component and UI we can quickly define a placeholder field as per.

Contributor