Mantine

Map IntentForm’s field types to Mantine components via the fieldComponents prop.

Install

pnpm add @intentform/core @intentform/react zod @mantine/core @mantine/hooks

Make sure MantineProvider wraps your app root as usual.

Field components map

import { TextInput, NumberInput, Select, Textarea } from '@mantine/core'
import type { FieldComponentsMap } from '@intentform/react'

export const mantineComponents: FieldComponentsMap = {
  text: ({ field, value, onChange }) => (
    <TextInput
      id={field.id}
      label={field.label}
      value={value ?? ''}
      onChange={(e) => onChange(e.currentTarget.value)}
    />
  ),

  number: ({ field, value, onChange }) => (
    <NumberInput
      id={field.id}
      label={field.label}
      value={value ?? ''}
      onChange={(val) => onChange(val)}
    />
  ),

  select: ({ field, value, onChange }) => (
    <Select
      id={field.id}
      label={field.label}
      value={value ?? null}
      onChange={(val) => onChange(val ?? '')}
      data={field.options?.map((opt) => ({ value: opt.value, label: opt.label })) ?? []}
    />
  ),

  textarea: ({ field, value, onChange }) => (
    <Textarea
      id={field.id}
      label={field.label}
      value={value ?? ''}
      onChange={(e) => onChange(e.currentTarget.value)}
      autosize
      minRows={3}
    />
  ),
}

Wire up

import { createIntentForm } from '@intentform/core'
import { IntentForm } from '@intentform/react'
import { openaiProvider } from '@intentform/provider-openai'
import { mantineComponents } from './field-components'
import { accidentReportModel } from './models/accident-report'

const engine = createIntentForm({
  provider: openaiProvider({ apiKey: process.env.OPENAI_API_KEY! }),
  models: [accidentReportModel],
})

export default function App() {
  return (
    <IntentForm
      engine={engine}
      fieldComponents={mantineComponents}
    />
  )
}