Contact
BlockHow to reach the team beside a form that checks itself on submit, sends, and confirms — or keeps everything on failure.
- Sections
- 7 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add contactimport { ContactBlock } from "@/components/blocks/contact"; export default function Page() { return <ContactBlock />;}<ContactBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Questions about plans, a bug, or a partnership — we reply within one working day." |
details | ContactDetail[] | DEFAULT_DETAILS |
headingLevelThe headline's level. | 1 | 2 | 3 | 4 | 5 | 2 |
onSubmitSends the message. Throw (or reject) to show an error and keep the form. | (values: ContactValues) => void | Promise<void> | — |
successMessageShown once the message is sent. | string | "Thanks — your message is on its way. We'll reply by email within one working day." |
title | string | "Get in touch" |
topicsWhat people can write about. An empty list hides the choice. | string[] | ["Sales", "Support", "Partnerships"] |
Plus every attribute of <section> except title, onSubmit.
Details are a description list with real mailto:, tel: and <address>. Fields have visible labels; errors appear only on submit, in words tied to each field (aria-describedby, aria-invalid), and focus moves to the first problem. The topic is a labelled radio group. While sending, the button says so; once sent, a confirmation replaces the form and takes focus. A send failure is an alert and keeps what was typed.