Success

A centred card with a filled check mark, a title and a message. Form swaps the <form> for it after a successful submit when settings.success is a message (or unset). Redirect and schedule successes navigate instead.

#Preview

#Usage

// settings: { success: { type: 'message', title: 'You are on the list', message: 'We will email you once when we launch.' } }
<Form schema={waitlist} client={kibble} />   // swaps to <Success /> after a successful submit

// Your own success UI instead:
<Form schema={waitlist} client={kibble} showSuccess={false} onSuccess={(res) => router.push(`/thanks?id=${res.id}`)} />

// Or the card with custom copy, inside a composed form:
import { Success } from 'kibbleforms';
<Success title="Got it">We reply within a day.</Success>

The text comes from the schema's settings.success (the code the visitor's browser runs); the server's echoed success is used only when the schema has none.

#Props

Prop	Type	Default	Description
title	ReactNode	success.title ?? "Thank you"	Heading.
children	ReactNode	success.message ?? "Your response has been recorded."	Body text.
className	string	card classes	Merged onto the root.
…<div> attributes			Spread on the root (except title).

Renders <div role="status" data-kb="success"><svg/><h3>title</h3><p>message</p></div>. It must be rendered inside a Form or FormProvider (it reads the form's success).

#Variants and states

• Message: shown as above.
• Redirect / schedule: not shown; the hook resolves the URL (with prefill and utm_* passthrough) and navigates. Custom UIs can read successUrl from useKibbleForm and render a link instead.
• showSuccess={false}: Form keeps rendering the form; handle onSuccess yourself.

#Customization

• Tokens: --kb-muted (card background), --kb-border, --kb-primary (the check mark's disc) and --kb-primary-fg (the check), --kb-fg, --kb-muted-fg, --kb-radius.
• className="bg-transparent border-0 py-6 text-left items-start" turns the card into plain text.
• CSS hooks: [data-kb="success"], or [data-kibble][data-status="success"] on the wrapper.

#Accessibility

role="status" announces the result politely when it appears. The check mark is aria-hidden. When it replaces the form, the card takes keyboard focus, and if it's off-screen it scrolls into view with its top at the top of the window.

Fixed headers: with a fixed or sticky nav, give the scroll an offset so the card lands below it, e.g. html { scroll-padding-top: 5rem; } (your nav's height plus a little), or only for the card: [data-kb="success"] { scroll-margin-top: 5rem; }.

#Related

Form, Submit, Schema: settings, Headless: successUrl