Customizing array of objects UI with popover and descriptive cards

You're looking to customize the UI for an array of objects field in Sanity Studio! Instead of the default stacked list, you want a more visual interface with descriptive cards or a popover-style presentation. Here's how to approach this:

Control the Editing Modal

The simplest way to change how array items are edited is through the modal option in your array schema:

defineField({
  name: 'yourArrayField',
  type: 'array',
  of: [
    defineArrayMember({
      type: 'yourObjectType'
    })
  ],
  options: {
    modal: {
      type: 'popover', // or 'dialog'
      width: 'auto' // or a specific number like 800
    }
  }
})

The type can be either 'popover' (for a smaller overlay) or 'dialog' (for a full modal). The default is {type: 'dialog', width: 'auto'}.

Customize Array Item Previews

To show more descriptive cards for each item, customize the preview for your object type:

defineType({
  name: 'yourObjectType',
  type: 'object',
  fields: [
    // your fields...
  ],
  preview: {
    select: {
      title: 'fieldName',
      subtitle: 'anotherField',
      media: 'imageField'
    },
    prepare({title, subtitle, media}) {
      return {
        title,
        subtitle,
        media
      }
    }
  }
})

Check out this guide on creating richer array item previews for more details.

Full Custom Input Component

For complete control over the array UI, you can create a custom input component using the Form Components API:

import {ArrayOfObjectsInputProps} from 'sanity'

export function CustomArrayInput(props: ArrayOfObjectsInputProps) {
  const {renderDefault, members, value} = props
  
  // You can customize the presentation here
  // Access members to get the array items
  // Build your own card-based UI
  
  return renderDefault(props) // or your custom JSX
}

Then add it to your schema:

components: {
  input: CustomArrayInput
}

The renderDefault function is particularly useful because it lets you wrap or enhance the existing UI while preserving Sanity's real-time collaboration features.

For step-by-step examples of building custom array inputs, check out:

• Array input with selectable templates
• Your first input component guide
• Form Components documentation

Start with the modal option for quick wins, then move to custom components if you need more control!