Formularzustände

Bestätigungen, Fehler mit Ausweg, gespeicherte Entwürfe und der Weg zurück ins Formular.

3 Components · 12 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Fehler und Wiederaufnahme4
Fortschritt speichern4
Bestätigungsseiten4

error-recovery

Fehler und Wiederaufnahme

Wenn etwas schiefgeht, übernimmt das Formular die Verantwortung, behält jede Eingabe und zeigt den Ausweg. Probleme über dem Formular, Prüfungen beim Tippen mit Vorschlag für Tippfehler, ein fehlgeschlagenes Senden, das sich selbst wiederholt, und eine abgelaufene Sitzung, die kein Wort verliert.

Übersicht oben
Prüfen beim Tippen
Senden fehlgeschlagen
Sitzung abgelaufen

Props und Details

Übersicht oben

Alle Probleme in einem Kasten über dem Formular, jedes ein Link zu seinem Feld. Ein behobenes Feld verschwindet sofort von der Liste und zeichnet einen Haken, mit dem letzten wird der Kasten zur grünen Entwarnung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/error-recovery

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<ErrorRecovery variant="summary-top" showErrors values={{ name, email, phone, message }} onSubmit={(data) => …} />

Source

Prüfen beim Tippen

Prüfungen nach dem Verlassen eines Felds, nie mitten im Tippen. Ein vergebener Benutzername bietet einen freien an, eine vertippte Domain wird mit einem Tipp korrigiert, Passwortregeln haken sich nacheinander ab.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/error-recovery

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<ErrorRecovery variant="inline-live" takenNames={[…]} domains={["example.com", …]} />

Source

Senden fehlgeschlagen

Das Senden ging nicht durch, und das Formular sagt es klar, jedes Wort ist noch da. Ein Countdown läuft im Knopf für den neuen Versuch ab und versucht es selbst, die Nachricht lässt sich kopieren, ein anderer Weg zum Schreiben bleibt offen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/error-recovery

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<ErrorRecovery variant="submit-failed" onSubmit={async (data) => (await send(data)).ok} fallbackEmail="hello@example.com" />

Source

Sitzung abgelaufen

Die Anmeldung ist mitten in einem langen Text abgelaufen. Das Formular bleibt hinter einem weichen Schleier sichtbar, ein kleiner Dialog fragt nach dem Passwort, und danach stehen die Worte genau dort, wo sie waren.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/error-recovery

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<ErrorRecovery variant="session-expired" account="lena@example.com" values={{ message }} onSubmit={signIn} />

Source

save-progress

Fortschritt speichern

Lange Formulare, die nicht in einem Zug fertig werden müssen. Automatisch im Browser gespeichert mit ruhigem Hinweis, ein Link per E-Mail zum Weitermachen überall, begonnene Formulare als Entwürfe und ein Willkommen zurück dort, wo man aufgehört hat.

Automatisch speichern
Später per Link weitermachen
Entwürfe
Willkommen zurück

Props und Details

Automatisch speichern

Jede Änderung bleibt nach einer kurzen Pause im Browser. Ein Chip in der Ecke wechselt vom Kreisel zum Haken und zählt, wie lange das Speichern her ist, wer zurückkommt, bekommt den Text zurück, mit einem Weg, ihn zu leeren.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/save-progress

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<SaveProgress variant="autosave" storageKey="grant-application" fields={[{ name, label, long }]} onSave={(data) => …} />

Source

Später per Link weitermachen

Was aufbewahrt wird, steht neben dem Formular, ausgefüllte Felder abgehakt um einen Ring. Eine E-Mail-Adresse reicht für einen Link, der das Formular auf jedem Gerät öffnet, der Link lässt sich sofort kopieren.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/save-progress

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<SaveProgress variant="resume-link" fields={[{ name, label, value }]} days={30} link={resumeUrl} onSave={({ email }) => …} />

Source

Entwürfe

Begonnene Formulare als Karten mit Fortschrittsring, dem aktuellen Schritt und der letzten Bearbeitung. Karten heben sich unter dem Zeiger, Entfernen lässt sich rückgängig machen, solange der Hinweis steht.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/save-progress

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<SaveProgress variant="drafts" drafts={[{ id, title, progress, edited, step }]} onContinue={(id) => …} onRemove={(id) => …} />

Source

Willkommen zurück

Wer zurückkommt, wird dort begrüßt, wo er aufgehört hat, die Schritte als Segmente, der nächste atmet leise. Weitermachen ist die Hauptaktion, neu beginnen fragt einmal nach, mit weicher Höhe.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/save-progress

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea

Usage

<SaveProgress variant="resume-banner" resume={{ title, started, done: 3, total: 5, next }} onContinue={() => …} />

Source

success-states

Bestätigungsseiten

Die Seite nach einem Formular. Sie sagt, was passiert ist, was als Nächstes kommt, und bietet eine nützliche Handlung. Eine Vorgangsnummer mit nächsten Schritten, ein Beleg zum Drucken, das Geschickte mit Minuten zum Ändern und der aktuelle Stand einer Anfrage.

Nächste Schritte
Beleg
Was du geschickt hast
Statusverlauf

Props und Details

Nächste Schritte

Ein Haken, der sich mit einem Lichtring zeichnet, die Vorgangsnummer zum Kopieren und die nächsten Schritte als Karten, die nacheinander aufsteigen, der erste schon abgehakt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/success-states

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, switch

Usage

<SuccessStates variant="next-steps" title="…" reference="AT-2041" steps={[{ title, text, icon }]} primary={{ label, href }} />

Source

Beleg

Die Bestätigung neben einem Beleg als Papierstreifen mit Abrisskante. Aussteller, Posten, Summe, Zahlart und Steuerhinweis, fertig zum Drucken oder als PDF.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/success-states

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, switch

Usage

<SuccessStates variant="receipt" title="…" reference="R-2026-0418" lines={[{ title, amount }]} paidWith="Card ending 4242" issuer={{ name, address, taxId }} />

Source

Was du geschickt hast

Die Antworten, wie sie ankamen, Zeile für Zeile. Ein Ring läuft die Minuten zum Ändern herunter, danach verschwindet der Knopf und die Zeile sagt, dass die Arbeit begonnen hat.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/success-states

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, switch

Usage

<SuccessStates variant="submitted-summary" title="…" fields={[{ label, value }]} editMinutes={10} onEdit={() => …} />

Source

Statusverlauf

Wo die Anfrage gerade steht, auf einer Schiene, die sich bis zum aktuellen Schritt füllt, der leise pulsiert. Eine Schätzung oben, Updates per SMS mit einem Schalter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/success-states

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, switch

Usage

<SuccessStates variant="status-tracker" title="…" reference="…" eta="by Friday" steps={[{ title, text, state: "done", when }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Formularzustände stehen.

Auf dieser Seite

Übersicht oben

Prüfen beim Tippen

Senden fehlgeschlagen

Sitzung abgelaufen

Automatisch speichern

Später per Link weitermachen

Entwürfe

Willkommen zurück

Nächste Schritte

Beleg

Was du geschickt hast

Statusverlauf

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit