Conditional Logic

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

type Condition = ConditionalLogic['conditions'][number];
type ConditionOperator = Condition['operator'];

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 { useFormState, useFormSchema } from '@osforms/react';

function MyForm({ slug }: { slug: string }) {
  const { schema } = useFormSchema(slug);
  const [state, actions] = useFormState(
    schema,
    `https://osforms.com/api/v1/f/${slug}`
  );

  // actions.visibleFields: fields visible for the current answers
  // actions.currentField: the field at state.currentIndex
  return <p>{actions.visibleFields.length} questions</p>;
}