How to access parent object in custom input component in Sanity v3?
In Sanity Studio v3, the parent object is no longer automatically passed as a prop to custom input components. Instead, you need to use the useFormValue hook to access parent or document values.
Accessing Parent Values in v3
Here's how to migrate from the v2 approach to v3:
In v2, you used props.parent:
import {withDocument} from 'part:@sanity/form-builder'
function MyInput(props) {
const parentValue = props.parent.someField
return <div>{/* ... */}</div>
}
export default withDocument(MyInput)In v3, use the useFormValue hook:
import {useFormValue} from 'sanity'
function MyInput(props) {
// Access a specific field from the parent/document
const parentValue = useFormValue(['someField'])
// Or access the entire document
const document = useFormValue([])
return <div>{/* ... */}</div>
}
export default MyInputHow useFormValue Works
The useFormValue hook takes an array representing the path to the value you want to access:
useFormValue([])- Gets the entire documentuseFormValue(['title'])- Gets thetitlefielduseFormValue(['author', 'name'])- Gets nested values
For accessing parent object values when your input is nested inside an object, you can use props.path to construct the parent path:
import {useFormValue} from 'sanity'
function MyInput(props) {
// Get parent path by removing the last segment
const parentPath = props.path.slice(0, -1)
const parentValue = useFormValue(parentPath)
return <div>{/* ... */}</div>
}This change was part of the Studio v2 to v3 migration, where the parts system was deprecated in favor of React hooks for better composability and type safety.
Show original thread13 replies
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.