🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Custom Input: Placeholder

By Arnas Z

Simple Placeholder Custom Input utilising Sanity UI.


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>

export default Placeholder


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.