How to build a custom input component that dynamically displays a list of checkboxes based on the current value of a separate field.

// Meal.js
export default {
  title: 'Meal',
  name: 'meal',
  type: 'document',
  fields: [
    {
      title: 'Name',
      name: 'name',
      type: 'string',
    },
    {
      title: 'Ingredients',
      name: 'ingredients',
      type: 'array',
      description: 'ingredients for the meal',
      of: [{type: 'ingredient'}],
    },
  ],
}

// Ingredient.js
export default {
  title: 'Ingredient',
  name: 'ingredient',
  type: 'document',
  fields: [
    {
      title: 'Ingredient Name',
      name: 'ingredientName',
      type: 'string',
    },
  ],
}

// Shopper.js
import {MealIngredientsComponent} from './MealIngredientsComponent'

export default {
  title: 'Shopper',
  name: 'shopper',
  type: 'document',
  fields: [
    {
      title: 'Name',
      name: 'name',
      type: 'string',
    },
    {
      title: 'Meal',
      name: 'meal',
      type: 'reference',
      description: 'Select the meal for this shopper',
      to: [{type: 'meal'}],
    },
    {
      title: 'Shopping List',
      name: 'shoppingList',
      type: 'array',
      description: 'List of ingredients to buy for selected meal',
      of: [{type: 'shoppingListItem'}],
      components: {
        input: MealIngredientsComponent,
      },
    },
  ],
}

// ShoppingListItem.js
export default {
  title: 'Shopping List Item',
  name: 'shoppingListItem',
  type: 'document',
  fields: [
    {
      title: 'Ingredient',
      name: 'ingredient',
      type: 'string',
    },
    {
      title: 'Purchased Item',
      name: 'purchased',
      type: 'boolean',
    },
  ],
}

import {useFormValue, useDocumentStore, set, unset} from 'sanity'
import {useEffect, useCallback, useState} from 'react'
import {Checkbox} from '@sanity/ui'

export const MealIngredientsComponent = (props) => {
  const {onChange, value} = props

  // define component state
  const [shoppingList, setShoppingList] = useState([])
  const [meal, setMeal] = useState(null) // this will be the meal object that is selected in the shopper document

  // Set up a GROC query to get the ingredient list for the currently selected meal
  const docId = useFormValue(['_id']) // get the id of the currently active shopper
  console.log(docId)
  const query = '*[_id == $currentDoc]{meal->}'
  const documentStore = useDocumentStore()
  let queryResults = documentStore.listenQuery(query, {currentDoc: docId}, {})
  useEffect(() => {
    const subscription = queryResults.subscribe({
      next(result) {
        if (result[0].meal === undefined) return
        if (!result[0].meal) {
          setShoppingList([]) // update component state
          unset()
        } else {
          if (result[0].meal.name === meal) {
            return
          } else {
            setMeal(result[0].meal.name)
          }

          const requiredIngredients = result[0].meal.ingredients
          const newShoppingList = requiredIngredients.map((item) => ({
            ingredient: item.ingredientName,
            purchased: false,
          }))
          setShoppingList(newShoppingList)
        }
      },
    })
    return () => {
      subscription.unsubscribe()
    }
  })

  // define the event handler for the checkbox
  const handleChange = useCallback(
    (e, ingredient) => {
      const {checked} = e.target
      setShoppingList((shoppingList) => {
        return shoppingList.map((item) => {
          if (item.ingredient === ingredient) {
            return {
              ingredient: item.ingredient,
              purchased: checked,
            }
          }
          return item
        })
      })
      set(shoppingList)
    },
    [onChange],
  )

  let shoppingListNodes = shoppingList.map((r) => {
    return (
      <div key={r.ingredient}>
        <Checkbox checked={r.purchased} onChange={(e) => handleChange(e, r.ingredient)} />
        <label>{r.ingredient}</label>
      </div>
    )
  })

  return <div>{shoppingListNodes}</div>
}

const handleClick = useCallback(
      (e) => {
        const inputValue = {
          _type: 'reference',
          _ref: e.target.value,
        }

        if (value) {
          if (value.some((country) => country._ref === inputValue._ref)) {
            onChange(set(value.filter((item) => item._ref != inputValue._ref)))
          } else {
            onChange(set([...value, inputValue]))
          }
        } else {
          onChange(set([inputValue]))
        }
      },
      [value],
    )

import React, { useEffect, useState } from 'react';
import { Card, Flex, Checkbox, Box, Text } from '@sanity/ui';
import { FormField } from '@sanity/base/components';
import PatchEvent, { set, unset } from '@sanity/form-builder/PatchEvent';
import { useId } from '@reach/auto-id';
import client from 'part:@sanity/base/client';

const studioClient = client.withConfig({ apiVersion: '2021-10-21' });

const ReferenceSelect = React.forwardRef((props, ref) => {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    const fetchCountries = async () => {
      await studioClient
        .fetch(
          `*[_type == 'country']{
          _id,
          title
        }`
        )
        .then(setCountries);
    };

    fetchCountries();
  }, []);

  const {
    type, // Schema information
    value, // Current field value
    readOnly, // Boolean if field is not editable
    markers, // Markers including validation rules
    presence, // Presence information for collaborative avatars
    compareValue, // Value to check for "edited" functionality
    onFocus, // Method to handle focus state
    onBlur, // Method to handle blur state
    onChange, // Method to handle patch events,
  } = props;

  const handleClick = React.useCallback(
    (e) => {
      const inputValue = {
        _key: e.target.value.slice(0, 10),
        _type: 'reference',
        _ref: e.target.value,
      };

      if (value) {
        if (value.some((country) => country._ref === inputValue._ref)) {
          onChange(
            PatchEvent.from(
              set(value.filter((item) => item._ref != inputValue._ref))
            )
          );
        } else {
          onChange(PatchEvent.from(set([...value, inputValue])));
        }
      } else {
        onChange(PatchEvent.from(set([inputValue])));
      }
    },
    [value]
  );

  const inputId = useId();

  return (
    <FormField
      description={type.description} // Creates description from schema
      title={type.title} // Creates label from schema title
      __unstable_markers={markers} // Handles all markers including validation
      __unstable_presence={presence} // Handles presence avatars
      compareValue={compareValue} // Handles "edited" status
      inputId={inputId} // Allows the label to connect to the input field
      readOnly={readOnly}
    >
      {countries.map(country => (
        <Card padding={2}>
          <Flex align='center'>
            <Checkbox
              id={country._id}
              style={{ display: 'block' }}
              onClick={handleClick}
              value={country._id}
              checked={
                value ? value.some((item) => item._ref === country._id) : false
              }
            />
            <Box flex={1} paddingLeft={3}>
              <Text>
                <label for={country._id}>{country.title}</label>
              </Text>
            </Box>
          </Flex>
        </Card>
      ))}
    </FormField>
  );
});

export default ReferenceSelect;

import {useClient, useFormValue, set} from 'sanity'
import {useEffect, useCallback, useState} from 'react'
import {Flex, Checkbox, Box, Text} from '@sanity/ui'

export const MealIngredientsComponent = (props) => {
  const {onChange, value} = props
  const [shoppingList, setShoppingList] = useState(value)
  const sanityClient = useClient({apiVersion: '2023-01-01'})
  const meal = useFormValue(['meal'])

  // --- Fetch ingredients for the current meal
  useEffect(() => {
    if (!meal) {
      updateShoppingList([])
    } else {
      const fetchMealIngredients = async () => {
        await sanityClient
          .fetch(`*[_type == "meal" && _id == "${meal._ref}"]{ingredients}`)
          .then((resp) => {
            updateShoppingList(resp[0].ingredients)
          })
      }
      fetchMealIngredients()
    }
  }, [meal])

  // --- Update shopping list based on new ingredients from current meal
  const updateShoppingList = (newIngredients) => {
    // remove any existing ingredients that are NOT in the list of new ingredients
    let newList = shoppingList.filter((item) => {
      return newIngredients.some((newItem) => newItem.ingredientName === item.ingredient)
    })

    // add new ingredients that are NOT in the existing list of ingredients
    newIngredients.forEach((newItem) => {
      if (!newList.some((item) => item.ingredient === newItem.ingredientName)) {
        newList.push({
          _key: newItem._key,
          ingredient: newItem.ingredientName,
          purchased: false,
        })
      }
    })

    // update component state and content lake
    setShoppingList(newList)
    onChange(set(newList))
  }

  // -- Event handler for each checkbox
  const handleChange = useCallback(
    (e, item) => {
      const {checked} = e.target
      const ingredientKey = item._key
      const updatedList = shoppingList.map((listItem) => {
        if (listItem._key === ingredientKey) {
          return {
            ...listItem,
            purchased: checked,
          }
        } else {
          return listItem
        }
      })
      setShoppingList(updatedList)
      onChange(set(updatedList))
    },
    [shoppingList],
  )

  return (
    <div>
      {shoppingList.map((item) => (
        <div key={item._key}>
          <Flex align="center" padding={1}>
            <Checkbox
              id={item._key}
              checked={item.purchased}
              onChange={(e) => handleChange(e, item)}
            />
            <Box flex={1} paddingLeft={3}>
              <Text>{item.ingredient}</Text>
            </Box>
          </Flex>
        </div>
      ))}
    </div>
  )
}