form-builder

Appearance

JsonFields ​

Renders the fields of a useJsonForm form with your components, where the definition's layout puts them: the current step, with its sections, rows and slots.

ts
<JsonFields of={jsonForm} />

Parameters ​

  • of AnyJsonFormInstance: what useJsonForm returned
  • components FieldComponents: optional, defaults to those useJsonForm got
  • layoutComponents LayoutComponents: optional, defaults to those useJsonForm got
  • slots Readonly<Record<string, ReactNode>>: optional, the content of the layout's slots, by name
  • only readonly string[]: optional, renders only these fields, by path, in the order of the definition, without the layout
  • except readonly string[]: optional, leaves out these fields, by path
  • step number: optional, renders the step at this index instead of the current one

Explanation ​

It renders nothing of its own, so put it inside Formisch's <Form>, with your own submit button. It leaves out what conditions hide. A field type or layout type without a component, or a slot without content, throws a TypeError that names each one.

Example ​

tsx
export function CheckoutForm({ definition }: { definition: JsonForm }) {
  const jsonForm = useJsonForm(definition, { components, layoutComponents })

  function save(output: unknown) {
    console.log(output)
  }

  return (
    <Form of={jsonForm.form} onSubmit={save}>
      <JsonFields
        of={jsonForm}
        slots={{ submit: <button type="submit">Place order</button> }}
      />
    </Form>
  )
}

Guides ​

Components ​