Form Component

<Form
  schema={Schema}
  initialValue={data}
  onSubmit={async ({ value }) => { ... }}
>
  {/* Field components */}
</Form>

<Form
  schema={Schema}
  initialValue={data}
  onSubmit={save}
  onFieldChange={{
    name: (value, { setFieldValue }) => {
      setFieldValue('slug', transliterate(String(value)))
    },
    quantity: (value, { setFieldValue, getFieldValue }) => {
      const price = getFieldValue('price') as number
      setFieldValue('total', (value as number) * price)
    },
  }}
>

<Form
  schema={Schema}
  initialValue={data}
  onSubmit={handleSubmit}
  persistence={{
    key: 'checkout-form',
    debounceMs: 500,
    dialogTitle: 'Restore draft?',
    dialogDescription: 'You have unsaved changes.',
    restoreLabel: 'Restore',
    discardLabel: 'Discard',
  }}
>

<Form.Group name="address">
  <Form.Field.String name="street" />
</Form.Group>

<Form.Group.List name="items" sortable>
  <Form.Field.String name="title" />
  <Form.Group.List.Button.Add />
  <Form.Group.List.Button.Remove />
</Form.Group.List>

<Form.Watch
  field="country"
  onChange={(value, { setFieldValue }) => {
    setFieldValue('currency', currencyMap[String(value)])
  }}
/>

<Form.InfoBlock variant="warning" title="Note">
  Company accounts require additional verification.
</Form.InfoBlock>

<Form.Divider label="Contact Information" />
<Form.Divider variant="dashed" />
<Form.Divider label="Phones" icon={<LuPhone />} />

<Form.Field.Hidden name="utm_source" value="landing" />

<Form.Field.Calculated
  name="total"
  label="Total"
  compute={(v) => (Number(v.price) || 0) * (Number(v.qty) || 0)}
  format={(v) => `${Number(v).toLocaleString()} ₽`}
  deps={['price', 'qty']}
/>

<Form.Errors title="Please fix:" showFieldNames />

<Form.Button.Submit>Save</Form.Button.Submit>

<Form.Button.Submit loadingText="Saving...">Save</Form.Button.Submit>

<Form.Button.Submit colorPalette="brand" size="lg" width="100%">
  Create Account
</Form.Button.Submit>

<Form
  schema={Schema}
  initialValue={data}
  onSubmit={async ({ value }) => {
    await new Promise((r) => setTimeout(r, 1500))
    alert(`Submitted: ${JSON.stringify(value)}`)
  }}
>
  <Form.Field.String name="name" />
  <Form.Button.Submit loadingText="Sending...">Send</Form.Button.Submit>
</Form>

<Form.Button.Reset>Reset</Form.Button.Reset>

<Form.FromSchema schema={Schema} initialValue={data} onSubmit={handleSubmit} submitLabel="Create" columns={2} />

<Form.Builder
  schema={Schema}
  initialValue={data}
  onSubmit={handleSubmit}
  fields={[
    { name: 'title', type: 'string' },
    { name: 'price', type: 'currency', section: 'Pricing' },
  ]}
/>

// All fields from schema
<Form.AutoFields />

// Only specific fields
<Form.AutoFields include={['name', 'email', 'role']} />

// Exclude certain fields
<Form.AutoFields exclude={['id', 'createdAt']} />

// Custom wrapper
<Form.AutoFields fieldWrapper={({ name, children }) => (
  <Box key={name} mb={4}>{children}</Box>
)} />

<Form.DebugValues />
<Form.DebugValues title="Current State" collapsed={3} />

<Form.DirtyGuard title="Unsaved changes" message="You have unsaved changes. Are you sure you want to leave?" />

<Form.Subscribe>{(values) => <Preview data={values} />}</Form.Subscribe>