Chapter 18: UI Libraries Integration

Core Idea

There is no adapter layer for UI kits — every integration is the same render-prop pattern, destructuring state/handleChange/handleBlur from form.Field's children function and mapping them onto whatever prop names the target component expects.

Key Concepts

• The library being headless means "integration" is just wiring: state.value → the component's value prop, handleChange → its change handler, handleBlur → its blur handler.
• Prop-name mismatches are the only real friction — e.g. shadcn/ui's Checkbox uses onCheckedChange instead of onChange, so the wiring function's signature changes slightly, but the pattern itself doesn't.
• The same pattern applies uniformly across MUI, Mantine, shadcn/ui, and Chakra UI — there's no per-library adapter package to install.

Code Examples

<Field
  name="username"
  children={({ state, handleChange, handleBlur }) => (
    <TextField
      value={state.value}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={handleBlur}
      placeholder="Enter username"
    />
  )}
/>

• What it demonstrates: wiring a Material UI TextField — the same shape works for shadcn/ui's Input, just swap the component and match its specific event signature.

Key Takeaways

1. Don't look for a @tanstack/form-mui-style adapter package — there isn't one, and there doesn't need to be; the render-prop pattern is the integration mechanism.
2. Watch for components with non-standard event names (onCheckedChange, onValueChange, etc.) — these are the only places the wiring code actually differs between UI libraries.
3. Wrap this wiring once per component type in your own reusable TextField/Checkbox/etc. components (ch020 Form Composition) rather than repeating the destructuring at every call site.

Connects To

• Ch020 Form Composition: createFormHook's fieldComponents, the recommended place to centralize this wiring.
• Ch006 React Quick Start: the bare render-prop shape this chapter builds on.