Forms

Reshape's forms are built on TanStack Form for state management and Zod for validation, wrapped in a set of field components (web/src/components/form/) that handle labels, error display, and Laravel's validation error format automatically. Every field takes the same two required props, form and name, and renders itself inside a <form.Field>.

Field Types

Reshape ships with a variety of form field components. So, let's explore all of the available types and their options:

• Text
• Textarea
• Select
• Checkbox
• Password
• Color
• Slider
• Rich Text
• Address Lines

Text Field

TextField : form, name, label, description?, required?, autocomplete?, autofocus?, disabled?, placeholder?, readonly?, type?

The general-purpose text input. type defaults to text — pass email, tel, etc. for the matching native input type.

Textarea Field

TextareaField : form, name, label, description?, required?, autocomplete?, autofocus?, disabled?, placeholder?, readonly?

Select Field

SelectField : form, name, label, options, description?, required?, placeholder?

options is an array of { label, value }.

Checkbox Field

CheckboxField : form, name, label, description?, readonly?

Password Field

PasswordField : form, name, label, description?, required?, autocomplete?, autofocus?, disabled?, placeholder?, readonly?

Color Field

ColorField : form, name, label, description?, required?

Renders a swatch + hex input pair.

Slider Field

SliderField : form, name, label, min, max, step, unit?, description?, required?

Rich Text Field

RichTextField : form, name, label, description?, required?

A Tiptap-backed editor — the same one used by comments.

Address Lines Fields

AddressLinesFields : form, namePrefix

A grouped set of address line inputs (street, city, region, postal code, country), used by the Addresses forms.

Building a form

Set up a Zod schema and a TanStack useForm, same as any TanStack Form app — Reshape doesn't wrap useForm itself, so everything from the TanStack docs applies directly. Conditional validation (e.g. a form that covers both "person" and "company" customers) is handled with Zod's .superRefine().

Submitting and server-side errors

useSubmit({ form, submitter, onSuccess?, onError? }) : { submit, handleSubmit }

Wraps a TanStack Query mutation and — critically — maps a Laravel 422 response's field errors straight onto the form (via form.setFieldMeta), so server-side validation renders through the exact same error UI as client-side Zod errors. This is what every create/edit form in the management area uses — see the Customers create page for a full example.

Inline auto-save fields

Not every form is a "fill in and submit" form — settings screens often save a single field the moment it changes.

useFieldSubmit(source, onSubmit) : { value, isDirty, recentlySubmitted, undo, submit }

A lighter composable for that case: tracks a dirty flag, exposes undo(), and briefly flags recentlySubmitted after a successful save (handy for a checkmark animation), without any of the multi-field form machinery. This is what backs most of the Profile settings screens.