Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Asynchronous List Options Component

By RD Pennell

Populate your list options in a string schema using an external API


  name: 'catBreed',
  title: 'Cat Breed',
  type: 'string',
  options: {
    list: [],
    url: '',
    formatResponse: (json) =>{breed}) => ({
        title: breed,
        value: breed.toLowerCase().split(' ').join('-'),
  components: {
    input: AsyncSelect,


import {useState, useEffect} from 'react'

const AsyncSelect = (props) => {
  const [listItems, setListItems] = useState([])
  const {schemaType, renderDefault} = props
  const {options} = schemaType
  const {url, formatResponse} = options

  useEffect(() => {
    const getCats = async () =>
        .then((res) => res.json())

  }, [url, formatResponse])

  return renderDefault({
    schemaType: {...schemaType, options: {...options, list: listItems}},

export default AsyncSelect

The Studio will break if you try to use an API call to populate your list options. Instead, you can use a custom input component and the renderDefault method to handle this in just a few lines of code.


Other schemas by author