Form System Guide

Form System Guide

This skill provides patterns for building forms using Sentry's new form system built on TanStack React Form and Zod validation.

Core Principle

• Always use the new form system (useScrapsForm, AutoSaveForm) for new forms. Never create new forms with the legacy JsonForm or Reflux-based systems.

• All forms should be schema based. DO NOT create a form without schema validation.

Imports

All form components are exported from @sentry/scraps/form:

import {z} from 'zod';

import {
  AutoSaveForm,
  defaultFormOptions,
  DisplayField,
  setFieldErrors,
  useScrapsForm,
} from '@sentry/scraps/form';

Important: DO NOT import from deeper paths, like '@sentry/scraps/form/field'. You can only use what is part of the PUBLIC interface in the index file in @sentry/scraps/form.

Form Hook: useScrapsForm

The main hook for creating forms with validation and submission handling.

Basic Usage

import {z} from 'zod';

import {defaultFormOptions, useScrapsForm} from '@sentry/scraps/form';