retrieve the values of sibling fields to use in rendering an inputComponent

You can access sibling field values in a custom input component using the useFormValue hook from Sanity Studio. This lets you read values from other fields in the same document and use them to customize how your component renders.

Here's how to implement your specific example of rendering text with a font size from a sibling field:

import { useFormValue } from 'sanity'

const CustomTextInput = (props) => {
  // Access the sibling fontSize field
  const fontSize = useFormValue(['fontSize'])
  
  return (
    <div>
      <input
        {...props.inputProps}
        style={{ fontSize: fontSize || '16px' }}
        value={props.value || ''}
        onChange={(e) => props.onChange(e.target.value)}
      />
    </div>
  )
}

export default CustomTextInput

How it works

The useFormValue hook accepts a path array that specifies which field to access:

• Sibling field: useFormValue(['fieldName'])
• Nested field: useFormValue(['parent', 'child', 'fieldName'])
• Entire document: useFormValue([])

The hook automatically re-renders your component when the referenced field changes, so your text input will dynamically update its styling as the user modifies the fontSize field.

Common patterns

Multiple sibling fields:

const fontSize = useFormValue(['fontSize'])
const fontWeight = useFormValue(['fontWeight'])
const color = useFormValue(['color'])

// Apply all styles
<input style={{ fontSize, fontWeight, color }} />

Conditional rendering based on sibling:

const showAdvanced = useFormValue(['showAdvancedOptions'])

return showAdvanced ? <AdvancedInput {...props} /> : <SimpleInput {...props} />

Working with array items: When your input is inside an array, you can access other fields in the same array item using the path:

const { path } = props
const parentPath = path.slice(0, -1)
const siblingValue = useFormValue([...parentPath, 'siblingFieldName'])

Important notes

• useFormValue only works inside custom input components within the form builder context—you can't use it in document actions or other Studio contexts
• This hook replaced the old v2 pattern of accessing props.document or props.parent
• The hook returns undefined if the field doesn't exist or hasn't been set yet, so provide fallback values

This approach gives you full control over creating dynamic, interdependent form experiences without needing to make API calls or manage complex state yourself.