Website
Contact
A correspondence form, contact facts, questions and location imagery.
Usage
When to reach for it
Ships from@misoto22/design/website
import { CorrespondenceSection } from '@misoto22/design/website'Notes
A correspondence page's primary content and supporting facts.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
controlled correspondence
The host controls every field and confirms success after its own submission work. This local example captures a draft in memory and sends no message.
Start a conversation
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
ContactFormView
Controlled contact form. Validation, submission and delivery remain host responsibilities.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelsrequired | ContactFormLabels | — | |
| limitsrequired | Record<keyof ContactFormValues, number> | — | |
| onFieldChangerequired | (field: keyof ContactFormValues, value: string) => void | — | |
| onSubmitrequired | FormEventHandler<HTMLFormElement> | — | |
| onTopicChangerequired | (value: string) => void | — | |
| topicrequired | string | — | |
| topicsrequired | { value: string; label: string }[] | — | |
| valuesrequired | ContactFormValues | — | |
| error | string | — | |
| idPrefix | string | Optional stable prefix for links to a specific form. | |
| pending | boolean | false | — |
| success | { title: string; description: string } | A server-confirmed success. The host decides when the form can disappear. |
ContactFacts
Contact facts retain their definition-list semantics and optional navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | DescriptionListItem[] | — | |
| labelrequired | string | — | |
| links | ReactNode | — | |
| linksLabel | string | — |
QuestionList
Visible questions and answers, useful when the complete answer set is short.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { id: string; question: string; answer: string }[] | — | |
| titlerequired | string | — | |
| description | string | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
LocationFigure
Static map presentation; provider URLs, credentials and theme selection stay in the host.
| Prop | Type | Default | Description |
|---|---|---|---|
| coordinatesrequired | string | — | |
| labelrequired | string | — | |
| credit | ReactNode | — | |
| image | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.