Advanced Patterns

<RelationFieldProvider relations={relations}>
  <FormI18nProvider locale={locale} t={t}>
    <Form
      schema={ProductCreateFormSchema}
      initialValue={defaults}
      onSubmit={createProduct}
      persistence={{ key: 'product-draft' }}
    >
      <Form.Steps animated validateOnNext>
        <Form.Steps.Step title="Basic Info">
          <Form.AutoFields include={['name', 'description', 'price']} />
        </Form.Steps.Step>

        <Form.Steps.Step title="Details">
          <Form.Field.Select name="categoryId" />
          <Form.Field.Tags name="tags" />
          <Form.Field.Rating name="rating" />

          <Form.When field="status" is="ACTIVE">
            <Form.Field.Date name="publishDate" />
          </Form.When>
        </Form.Steps.Step>

        <Form.Steps.Step title="Review">
          <Form.DebugValues />
        </Form.Steps.Step>

        <Form.Steps.Navigation />
      </Form.Steps>
    </Form>
  </FormI18nProvider>
</RelationFieldProvider>

function AdminForm({ isAdmin }: { isAdmin: boolean }) {
  return (
    <Form schema={Schema} initialValue={data} onSubmit={save}>
      <Form.Field.String name="name" />
      <Form.Field.Select name="status" disabled={!isAdmin} />
      <Form.Field.Number name="price" readOnly={!isAdmin} />
      <Form.Button.Submit>Save</Form.Button.Submit>
    </Form>
  )
}

<Form.Builder
  config={{
    fields: [
      { name: 'name', type: 'string', label: 'Name', required: true },
      { name: 'email', type: 'string', label: 'Email', validation: 'email' },
      { name: 'role', type: 'select', label: 'Role', options: roles },
    ],
  }}
  onSubmit={handleSubmit}
/>