Get help on Discord

How to access parent field in custom input component like conditional hidden?

7 replies
Last updated: Sep 28, 2021
Another one… Getting a field’s 
parent
is super helpful on the new conditional hidden fields. I need to do something similar with a custom input component, but it’s not available in the props. Is there something similar to 
withDocument
i.e. 
withParent
? Or another way to get this prop in? more in thread ->
AI Update

Great question! You're right that conditional hidden fields have access to parent and document in their callback functions, but custom input components don't get these props directly. The modern approach in Sanity Studio v3 is to use the useFormValue hook instead of the old withDocument pattern.

Here's how to access parent values in your custom input component:

import { useFormValue } from 'sanity'

const MyCustomInput = (props) => {
  // Get the parent object (similar to {parent} in conditional fields)
  const { path } = props
  const parentPath = path.slice(0, -1) // Remove the last segment to get parent path
  const parentValue = useFormValue(parentPath)
  
  // Or get the entire document (similar to {document} in conditional fields)
  const document = useFormValue([])
  
  // Access specific sibling fields
  const siblingField = useFormValue([...parentPath, 'siblingFieldName'])
  
  return (
    // Your component JSX
  )
}

The key is understanding that useFormValue takes a path array:

  • [] returns the entire document
  • ['fieldName'] returns a top-level field
  • ['parent', 'child', 'fieldName'] navigates nested structures

For array items or nested objects, you can derive the parent path from props.path by slicing off the last segment. This gives you access to sibling fields within the same object, which is usually what you need when replicating the {parent} behavior from conditional fields.

Important note: Unlike v2 where props.document and props.parent were available, v3 requires using useFormValue for all form value access. The hook only works within the form builder context (custom input components), so you can't use it in document actions or other contexts outside the form.

This approach gives you the same power as conditional hidden fields but within your custom components!

Show original thread
7 replies
Looking at the React Components dev tools, here are the props passed into my custom input component:
If I go up a few components to the 
ObjectInputField
, I see the 
parent
prop that I need:
Found a hacky way to do this by consuming the 
ChangeIndicatorContext
:
import { ChangeIndicatorContext } from '@sanity/base/change-indicators';
// other imports

interface ModelHighlightedFieldsInputProps
  extends CustomInputComponentProps<string> {
  document: Sanity.Schema.Article;
}

type FullPath = Array<string | { _key: string }>;

interface ChangeIndicatorContextValue {
  fullPath: FullPath;
}

export const useChangeIndicator = () => {
  const ctx = React.useContext(ChangeIndicatorContext);
  if (!ctx)
    throw new Error('useSearchContext must be used within a ThemeProvider');
  return ctx as ChangeIndicatorContextValue;
};

const getParent = (
  document: Sanity.Schema.Article,
  fullPath: FullPath,
): Sanity.Schema.ModelReference => {
  return fullPath.slice(0, -1).reduce((prevValue, pathNode) => {
    if (typeof pathNode === 'string') return prevValue[pathNode];
    if (Array.isArray(prevValue)) {
      return prevValue.find((item) => item._key === pathNode._key);
    }
    throw new Error('Not sure how we got here');
  }, document);
};

const ModelHighlightedFieldsInputBase: React.FC<ModelHighlightedFieldsInputProps> =
  (props, ref) => {
    const { fullPath } = useChangeIndicator();
    const { document, type } = props;
    const parent = getParent(document, fullPath);
    // the rest of my component
  }
There’s a 
withValuePath
you can use in combination with 
withDocument
to get the necessary data — checkout the slug input component to see usage example
Thank you!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?