Aller au contenu

Composants · Référence

Form

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

Dernière mise à jour le 28 septembre 2026

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.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/form

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 locale={locale} messages={{ [locale]: { 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`.
Profile

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

Used only for this demonstration.

SelectField stores a single string value.

SelectField supports single or multiple values.

SearchableSelectField supports searchable single or multiple selection.

Details

Compound fields can be composed in the same wrapper.

Add, edit, or remove arbitrary metadata pairs.

Glissez-déposez un fichier ici

Accepte : .pdf,.txt

Glissez-déposez un fichier ici

Accepte : image/*

Taille de l'image suggérée : 1280 x 720

CheckboxField stores a boolean value.

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