Live answers and navigation

Forms are React, so UI can react to answers. These hooks work anywhere inside <Form> — in aside, in <Success>, in custom fields and in theme components. They are for display; showing and hiding fields is <When>'s job.

Reading answers

import { Form, NumberInput, Page, RadioGroup, Success, useFieldValue } from '@open-form-build/core';

function Summary() {
  const tier = useFieldValue<string>('tier');
  const seats = Number(useFieldValue('seats') ?? 1);
  return <p>Total: ${(tier === 'pro' ? 20 : 0) * seats}/mo</p>;
}

export default function TeamPlan() {
  return (
    <Form aside={<Summary />}>
      <Page title="Plan">
        <RadioGroup name="tier" label="Tier" options={['free', 'pro']} required />
        <NumberInput name="seats" label="Seats" min={1} integer />
      </Page>
      <Success title="You're in">
        <Summary />
      </Success>
    </Form>
  );
}

<Form aside>

aside renders beside the questions on wide screens — a live preview, an order summary, a running total. On narrow screens the default layout puts it below the questions. SplitLayout and StepperLayout place it in their side panel, which comes first, so it stacks above them; FocusLayout doesn't show it. In the default layout, override --of-aside-width on your form's root class to resize it; it has no effect on the other layouts' panels. Never put fields in aside: they aren't part of the form's schema.

useFormNav

useFormNav() returns a FormNav: where the respondent is and the actions to move. Use it for custom progress, step lists and layouts.

import { useFormNav } from '@open-form-build/core';

function StepList() {
  const { steps, goTo } = useFormNav();
  return (
    <ol>
      {steps.map((step) => (
        <li key={step.position} data-state={step.state}>
          <button
            type="button"
            disabled={!step.reachable || step.state === 'current'}
            onClick={() => goTo(step.position)}
          >
            {step.title}
          </button>
        </li>
      ))}
    </ol>
  );
}

Copy and language

Field labels, page titles, options and other DSL text are translated for you. Wrap your own markup's text in <T> or tr() so it's translated and counted by open-form check. For text with values, use placeholders:

const tr = useTranslate();
tr('{n} seats left', { n: 3 }); // translation key: "{n} seats left"

import { useFormLanguage } from '@open-form-build/core';

function LanguageLinks() {
  const { locale, available, setLocale } = useFormLanguage();
  return available.map((code) => (
    <button key={code} type="button" aria-pressed={code === locale} onClick={() => setLocale(code)}>
      {code}
    </button>
  ));
}

See Languages for translation files.

Rules

• Display only. Use <When> to show or hide fields, never these hooks. Prices and totals you compute are for display; the server stores the answers, not your numbers.
• Values are raw input. A NumberInput keeps the string that was typed into it, and only validation, conditions and the submitted answers see a number. Convert with Number(...) before doing arithmetic.
• Hidden answers stay in memory. Answers to fields hidden by <When> are kept until submit (the server drops them). If a summary depends on a conditional field, check the same condition.
• A field's defaultValue arrives when it shows. Until the field's step has been shown, these hooks don't see it. Put answers you need from the start in <Form defaultValues>.