Components

Form

A TanStack Form setup with reusable field wrappers, compact and searchable selects, file inputs, submit state, and dirty-navigation blocking.

Install

Add this registry item to your app with shadcn.

bash

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. Built-in labels are stored in the component file and can be overridden with message props on the relevant field or form component.

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
In-file English and French defaults with override props

Usage

tsx

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.SubmitButton messages={{ submit: "Save" }} />
</form.AppForm>

File Selection Side Effects

FileField accepts onFileChange when selecting a file needs to update adjacent UI, upload metadata, or derived form state before submit.

tsx

<form.AppField name="attachment">
  {(field) => (
    <field.FileField
      accept=".pdf,.txt"
      label="Attachment"
      onFileChange={(file) => setSelectedFile(file || null)}
    />
  )}
</form.AppField>

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`.

Submitted Value

The submit handler normalizes files to displayable names.

json

"Submit the form to see its value."