Adaptive Requirements

Client-side companion packages for the Adaptive Requirements API. The API returns requirement schemas at runtime — these packages evaluate and render them.

How it works

┌─────────────────┐      ┌──────────────────┐      ┌─────────────────┐
│  Requirements   │      │     Engine        │      │   AdaptiveForm   │
│     API         │─────▶│  (evaluate &      │─────▶│  (render &      │
│                 │      │   validate)       │      │   collect)      │
└─────────────────┘      └──────────────────┘      └─────────────────┘
                                                           │
                                                           ▼
                                                    Submit answers
                                                    back to the API

1. Your application fetches a requirements schema from the API
2. The engine evaluates field visibility, validation, computed values, and options
3. AdaptiveForm renders the schema using your React or Vue components and collects user input
4. Your application submits the completed form data back to the API for server-side validation

Schemas are opaque and can change at any time. You never need to hard-code or inspect their contents — just pass them through.

Packages

Package	Description
@kotaio/adaptive-requirements-engine	Framework-agnostic core: rule evaluation, validation, field state computation. Zero React dependencies. Use this for server-side validation, custom renderers, or non-React integrations.
@kotaio/adaptive-form	React and Vue integrations: AdaptiveForm components with pluggable field renderers, multi-step flows, and (React) form library adapters. Import from @kotaio/adaptive-form/react or @kotaio/adaptive-form/vue.

Installation

Most app integrations only need the form package (which includes the engine as a dependency). Install the peer for your framework (react + react-dom, or vue):

npm install @kotaio/adaptive-form
npm install react react-dom   # or: npm install vue

For server-side validation or non-React usage, install the engine directly:

npm install @kotaio/adaptive-requirements-engine

Quick example

The Kota Requirements API expects answers as JSON in an { "answers": { field_id: value } } envelope, so hold the form state in controlled mode and submit it as JSON — this keeps value types intact (booleans stay booleans, arrays stay arrays):

import { AdaptiveFormProvider, AdaptiveForm } from '@kotaio/adaptive-form/react';

function RequirementsForm({ requirementId }) {
  const [requirements, setRequirements] = useState(null);
  const [formData, setFormData] = useState({});

  useEffect(() => {
    fetch(`/api/requirements/${requirementId}`)
      .then((res) => res.json())
      .then((data) => setRequirements(data.schema));
  }, [requirementId]);

  if (!requirements) return <p>Loading...</p>;

  const submit = () =>
    fetch(`/api/requirements/${requirementId}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers: formData }),
    });

  return (
    <AdaptiveFormProvider requirements={requirements}>
      <AdaptiveForm
        value={formData}
        onChange={setFormData}
        components={{
          text: TextInput,
          number: NumberInput,
          select: SelectInput,
          checkbox: CheckboxInput,
        }}
      />
      <button onClick={submit}>Submit</button>
    </AdaptiveFormProvider>
  );
}

Accessing step information

For multi-step schemas, wrap AdaptiveForm in an AdaptiveFormProvider to expose step state to sibling components (progress steppers, breadcrumbs). Prefer useStepNavigation() — it includes navigation handlers and live validation state:

import { AdaptiveFormProvider, AdaptiveForm, useStepNavigation } from '@kotaio/adaptive-form/react';

function ProgressStepper() {
  const nav = useStepNavigation();
  if (!nav.initialised) return null;

  return (
    <nav>
      {nav.steps.map((step) => (
        <span key={step.id} data-active={step.isCurrent}>
          {step.title} {step.isValid && '✓'}
        </span>
      ))}
    </nav>
  );
}

// Wrap both in AdaptiveFormProvider
<AdaptiveFormProvider requirements={requirements}>
  <ProgressStepper />
  <AdaptiveForm value={data} onChange={setData} components={...} />
</AdaptiveFormProvider>

useFormInfo() is deprecated — it still returns step descriptors but lacks navigation handlers. Existing code can keep using it; new code should use useStepNavigation().

See the form package README for React and Vue usage, controlled mode, multi-step forms, and form library adapters.

License

Apache-2.0 — see LICENSE for details.