Skip to content
Get help on Slack

How to define an empty or placeholder object within a schema array in Sanity.io using a custom input component.

6 replies
Last updated: May 21, 2021
Hi all 👋
I wonder if it’s possible to define an empty or placeholder object within schema array? Something that could just act as an identifier within content blocks.
May 21, 2021, 1:46 PM
Found a workaround myself if anyone needs it in the future, as custom input component :
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;
I then used it in document schema like so:

    {
      name: 'contentBlocks',
      title: 'Content Columns',
      type: 'array',
      of: [
        {
          name: 'test',
          title: 'Test',
          type: 'string',
          inputComponent: Placeholder,
        },
      ],
    },
May 21, 2021, 2:29 PM
Appreciate you sharing this back with us,
user H
, thanks! Props for having used Sanity UI as well 🙌
(You may want to add this to the Exchange
as a snippet so it doesn't get lost in Slack's history)
May 21, 2021, 2:33 PM
Found a workaround myself if anyone needs it in the future, as custom input component :
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;
I then used it in document schema like so:

    {
      name: 'contentBlocks',
      title: 'Content Columns',
      type: 'array',
      of: [
        {
          name: 'test',
          title: 'Test',
          type: 'string',
          inputComponent: Placeholder,
        },
      ],
    },
May 21, 2021, 2:29 PM
Sounds good
user M
, will add 👍
May 21, 2021, 3:37 PM
May 21, 2021, 4:37 PM
Awesome! Thanks Arnas 🙂
May 21, 2021, 5:02 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?