---
title: Success
description: The thank-you card rendered from settings.success after a submission.
preview: success
---
# 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
<!-- preview: success -->

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

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

// Or the card with custom copy, inside a composed form:
import { Success } from '@trymirio/mirio';
<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-mirio="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 `useMirioForm` and render a link instead.
- **`showSuccess={false}`**: `Form` keeps rendering the form; handle `onSuccess` yourself.

## Customization
- Tokens: `--mirio-muted` (card background), `--mirio-border`, `--mirio-primary` (the check mark's disc) and `--mirio-primary-fg` (the check), `--mirio-fg`, `--mirio-muted-fg`, `--mirio-radius`.
- `className="bg-transparent border-0 py-6 text-left items-start"` turns the card into plain text.
- CSS hooks: `[data-mirio="success"]`, or `[data-mirio-root][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-mirio="success"] { scroll-margin-top: 5rem; }`.

## Related
[Form](/docs/components/form.md), [Submit](/docs/components/submit.md), [Schema: settings](/docs/schema.md), [Headless: successUrl](/docs/components/headless.md)