FormDialog

Lomakeikkuna

Valintaikkuna, joka omistaa lähetystilan ja virheen.

Käyttöpaikat

Suoraan: palvelu tuo osan itse. Välillisesti: osa tulee mukaan toisen paketin osan kautta, ja sen muutos näkyy palvelussa silti. Laskettu julkaisun yhteydessä 23.10.2026.

TP-IAM

TP-TTK

TP-VASTAANOTTO

Käyttö

Paketin README:n luku sellaisenaan.

FormDialog — lomakedialogi

<FormDialog
  open={open} onOpenChange={setOpen}
  title="Lisää toimittaja"
  onSubmit={async () => {
    const res = await fetch("/api/toimittajat", { method: "POST", body });
    const json = await res.json().catch(() => null);
    if (!res.ok || !json?.success) throw new Error(json?.error ?? "Tallennus epäonnistui");
    onDone?.();
  }}
>
  <label>…</label>
</FormDialog>

`onSubmit` saa heittää — komponentti näyttää virheen eikä sulkeudu. Kutsujalle jäävät vain kentät ja verkkokutsu.

Propsi	Merkitys
`onSubmit`	`() => Promise<void \	string>`. Heitä virhe kun epäonnistuu
`variant`	`destructive` vahvistusdialogeille ilman kenttiä
`closeOnSuccess`	`false` jättää auki ja näyttää `onSubmit`in palauttaman viestin
`submitLabel` · `submittingLabel` · `cancelLabel`	tekstit
`submitDisabled`	estää lähetyksen (esim. pakolliset kentät tyhjinä)
`hideFooter`	hoida napit itse `children`issä

Komponentti omistaa lähetystilan, virheen, virheen nollauksen sulkiessa, nappien disabled-tilan ja <form>-elementin jotta Enter lähettää.

> Miksi tämä on olemassa: TP-Vastaanoton 18 modaalista 16 hallitsee > lähetystilaa mutta vain yksi näyttää virheen. Kun stubeille tulee > backend, ne saisivat nykyisellä mallilla äänettömän virhekäsittelyn.

Tuonti ja lähde

import { FormDialog } from "@karkkainen/ui";

src/components/form-dialog.tsx