@formskit/react

Official React host for FormKit. Provides a broad registry, layered form components, and a powerful three-layer styling system powered by Tailwind v4 + CSS variables.

Installation

npm install @formskit/react

Quick Start

import {
  createFormInputSession,
  computeFormState,
} from '@formskit/engine';
import {
  FORMSKIT_REACT_REGISTRY,
  FormField,
  FormKitStylingProvider,
} from '@formskit/react';
import '@formskit/react/styles.css';

const session = createFormInputSession(schema, {
  registry: FORMSKIT_REACT_REGISTRY,
});
const state = computeFormState(session);

// ...
<FormKitStylingProvider>
  {schema.fields.map((field) => (
    <FormField
      key={field.id}
      field={field}
      state={state}
      onChange={(id, value) => {
        // update session
      }}
    />
  ))}
</FormKitStylingProvider>

Styling

Three layers (all powered by the SSOT in tokens.ts):

1. Global CSS variables (override in your CSS)
2. <FormKitStylingProvider> for defaults
3. Per-field props like labelClassName, controlClassName

See the design doc for full details.

Custom Field Types

import { defineRegistry } from '@formskit/spec';
import { FORMSKIT_REACT_REGISTRY, DEFAULT_CONTROLS } from '@formskit/react';

const myRegistry = defineRegistry({
  ...FORMSKIT_REACT_REGISTRY,
  myCustomType: { ... },
});

// Extend the UI for your type (clean boundaries)
// Import the Props types for full type safety inside your renderers.
import type { ControlsMap, FieldControlProps } from '@formskit/react';

const myControls: ControlsMap = {
  ...DEFAULT_CONTROLS,
  myCustomType: MyCustomControl,               // receives FieldControlProps
  // or inline with typed props:
  // another: (props: FieldControlProps) => <div>...</div>,
};

Theming

:root {
  --fk-primary: oklch(...);
}

Or use the Provider for scoped changes.

Links

• Design: [docs/superpowers/specs/2026-06-27-formskit-react-package-design.md]
• Implementation plan: [docs/superpowers/plans/2026-06-27-formskit-react-implementation-plan.md]

## Current State

The package provides:

- Full delegation for all main field types via the renderers map (text, paragraph, toggle, choice (segmented/chips/select), datetime (mode aware), signature, asyncChoice (simulated load), fileUpload (multi + remove)).
- Displays for all types (delegated from DisplayField).
- Clean handling for containers (page/section/group with recursion) and content (heading/note/divider).
- FieldChrome for shared label/help/error rendering.
- Full support for custom controls/contents/displays via props for extendability.
- Three-layer styling (global CSS vars + FormKitStylingProvider + per-field `classNames`) powered by SSOT `tokens.ts`.
- Respects field optionKeys (placeholder, rows, choices, selection, control, accept, source, delayMs, labels, mode, etc.).

See the design doc for full details and the example for usage.

## Next Steps (per plan)

- Expand a11y/perf and more tests.
- Monorepo docs updates.
- Full build/release integration.

The architecture emphasizes clean boundaries and extendability.