Form Organisms

ImportCC

Available via @stackmates/ui-forms

FormShell

Shared form wrapper for TanStack Form. Renders noValidate so browser-native validation never intercepts TanStack Form validators. Without this, inputs like type="email" show browser tooltips instead of firing onSubmit validators.

FormShellProps

Prop	Type	Default	Description
form*	FormApi<any, any>	—	TanStack Form instance — handleSubmit is called on action
children*	ReactNode	—	Form fields and submit button
className	string	—	Additional CSS classes for the form element
data-testid	string	—	Test identifier for E2E tests

Installation

typescript

import { FormShell } from '@stackmates/ui-forms';

Usage

Basic usage

tsx

const form = useForm({
  defaultValues: { name: '', email: '' },
  onSubmit: async ({ value }) => {
    await saveAction(value);
    router.push('/success');
  },
});

<FormShell form={form} className="space-y-4" data-testid="contact-form">
  <FormInput form={form} name="name" label="Name" required />
  <FormInput form={form} name="email" label="Email" type="email" />
  <Button type="submit">Save</Button>
</FormShell>

Accessibility

Renders semantic <form> element
noValidate disables browser validation so TanStack validators control aria-invalid
Supports data-testid for E2E targeting
Browser-native tooltips are suppressed — TanStack Form provides full error message control
E2E tests can assert getByRole("textbox", { invalid: true })

Prop

Type

Default

Description

form*

FormApi<any, any>

—

TanStack Form instance — handleSubmit is called on action

children*

ReactNode

—

Form fields and submit button

className

string

—

Additional CSS classes for the form element

data-testid

string

—

Test identifier for E2E tests

const form = useForm({ defaultValues: { name: '', email: '' }, onSubmit: async ({ value }) => { await saveAction(value); router.push('/success'); }, }); <FormShell form={form} className="space-y-4" data-testid="contact-form"> <FormInput form={form} name="name" label="Name" required /> <FormInput form={form} name="email" label="Email" type="email" /> <Button type="submit">Save</Button> </FormShell>