Components

Form

A TanStack Form setup with reusable field wrappers, text inputs, text areas, selects, multi-selects, key/value editing, file uploads, submit state, and dirty-navigation blocking.

Install
Add this registry item to your app with shadcn.
bunx --bun shadcn@latest add https://krakstack.net/r/form.json

Overview

form creates an application form hook with reusable field components for common admin and product workflows. It standardizes labels, descriptions, validation messages, submit state, file inputs, image inputs, and dirty-navigation protection.

Features

  • Typed useAppForm hook built on TanStack Form
  • Text, textarea, select, multi-select, checkbox, file, image, and key/value fields
  • Field wrappers for grouped form sections
  • Submit button wired to form submission state
  • Dirty-navigation confirmation through TanStack Router
  • Localized component messages

Usage

const form = useAppForm({
  defaultValues: { name: "Ada" },
  onSubmit: async ({ value }) => save(value),
});

<form.AppForm>
  <form.AppField name="name">
    {(field) => <field.TextField label="Name" />}
  </form.AppField>
</form.AppForm>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies

Preview

Lead Capture
This form uses the exported field and form components from `useAppForm`.
Profile

Core contact details with text, select, and multi-select fields.

Used only for this demonstration.

SelectField stores a single string value.

MultiSelectField stores an array of string values.

Details

Compound fields can be composed in the same wrapper.

Add, edit, or remove arbitrary metadata pairs.

Accepts:

Suggested image size:

CheckboxField stores a boolean value.

Submitted Value
The submit handler normalizes files to displayable names.
"Submit the form to see its value."