Interacting with other fields

UI extensions can interact with the other fields of the form, and with the form itself.

For these purposes, the form property exposes the following methods:

change(fieldName: string, value: any) => Promise<void>changes the value of another field
getState() => Promise<FormState>returns the current form state
getFieldState(fieldName: string) => Promise<FieldState>returns the given field state
subscribeToFieldState(fieldName: string, callback: (state: FieldState, subscription: FieldSubscription) => void) => Promise<Unsubscribe>opens a subscription to a field's state changes
subscribeToFormState(callback: (state: FormState) => void, subscription: FormSubscription) => Promise<Unsubscribe>; opens a subscrition to the form's state changes
setFieldsVisibility(arg: VisibilityMap| ((currentVisibilityMap:VisibilityMap) => VisibilityMap)) => void;Allows modifying visibility of any field


Internally, Hygraph uses final-form to manage form and field states.


See FormState on final-form.

The FormSubscription param has the same shape as FormState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFormState((state) => console.log(state.dirty, state.errors), {
// react only to form `dirty` and `invalid` state changes
dirty: true,
invalid: true,


See FormState on final-form.

The FieldSubscription param has the same shape as FieldState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFieldState('title', (state) => console.log(state.value), {
// react only to field `value` changes
value: true,


Both subscribeToFieldState and subscribeToFormState return a function to be called when needing to unsubscribe from changes. In order to avoid perfomance issues, make sure to unsubscribe any existing subscription before subscribing again.

Example in React:

React.useEffect(() => {
let unsubscribe;
subscribeToFieldState('title', (state) => console.log(state.value), {
value: true,
}).then((fieldUnsubscribe) => (unsubscribe = fieldUnsubscribe));
return () => {
}, []);

Set fields visibilityAnchor

type VisibilityMap = {
[fieldApiId: string]: 'READ_ONLY' | 'HIDDEN' | 'READ_WRITE';

Using object form to set visibility for field with API ID fieldApiId

fieldApiId: 'READ_ONLY',

Using callback to calculate next visibility value for field with API ID fieldApiId

setFieldsVisibility((currentVisibilityMap) => {
const nextVisibilityValue =
currentVisibilityMap[fieldApiId] === 'READ_ONLY'
return {
fieldApiId: nextVisibilityValue,