Conditional Logic

import type {
  ConditionalLogic,
  Condition,
  ConditionOperator,
} from '@osforms/react';

type ConditionOperator =
  | 'equals'
  | 'not_equals'
  | 'contains'
  | 'not_contains'
  | 'greater_than'
  | 'less_than'
  | 'is_empty'
  | 'is_not_empty';

interface Condition {
  fieldId: string;
  operator: ConditionOperator;
  value?: string | number; // not needed for is_empty / is_not_empty
}

interface ConditionalLogic {
  action: 'show' | 'hide';
  match: 'all' | 'any'; // AND vs OR
  conditions: Condition[];
}

import type { FormField } from '@osforms/react';

const followUpField: FormField = {
  id: 'feedback_details',
  type: 'textarea',
  label: 'Tell us more',
  required: false,
  conditionalLogic: {
    action: 'show',
    match: 'all',
    conditions: [{ fieldId: 'rating', operator: 'less_than', value: 3 }],
  },
};

import { isFieldVisible, getVisibleFields } from '@osforms/react';
// Note: these utils are used internally by useFormState

import { useFormState, useFormSchema } from '@osforms/react';

const { schema } = useFormSchema('form-slug');
const [state, actions] = useFormState(schema, endpoint);

// actions.visibleFields — fields visible based on current answers
// actions.currentField  — the field at state.currentIndex