Contact section

A validated contact form that morphs into a confirmation, support channels, and office cards with local times.

import { ContactSection } from "@/forma/arc/blocks/contact-section/contact-section";

Base

In FORMA

Liegt in kit/arc/blocks/contact-section und ist über @/forma/arc/blocks/contact-section/contact-section erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

Contact pages and sections on marketing sites.
Sales or support pages that list several channels with response times.
Companies with offices in several time zones.

When not to use

Use support-widget for an in-app help launcher.
Use signup-form or login blocks for account flows.

Usage

import { ContactSection } from "@/forma/arc/blocks/contact-section/contact-section";

export function Contact() {
  return (
    <ContactSection
      title="Talk to us"
      topics={["Sales", "Support"]}
      onSubmit={async message => {
        const response = await fetch("/api/contact", { method: "POST", body: JSON.stringify(message) });
        if (!response.ok) throw new Error("Could not send");
      }}
    />
  );
}

API reference

ContactSection

A contact section in three layouts: a validated form that springs into a confirmation, a list of channels with detail, or offices with live local times and open status.

Prop	Type	Default	Description
`variant`	`"form" \| "channels" \| "offices"`	`"form"`	Layout.
`title`	`string`	–	Section heading.
`description`	`string`	–	One line under the heading.
`topics`	`string[]`	`["Sales", "Support", "Partnerships", "Press"]`	Topics offered in the form as a radio group of chips.
`onSubmit`	`(message: { name; email; topic; message }) => void \| Promise<void>`	–	Called with a valid message. Reject to keep the form and show an error; resolve to show the confirmation.
`channels`	`{ value; label; meta; icon?; detail: ReactNode }[]`	`contactExampleChannels`	Ways to reach you for the channels variant.
`channel`	`string`	–	Selected channel (controlled).
`defaultChannel`	`string`	–	Initial channel when uncontrolled.
`onChannelChange`	`(value: string) => void`	–	Called when the channel changes.
`offices`	`{ city; timeZone; address: string[]; email?; hours?: [number, number] }[]`	`contactExampleOffices`	Offices. timeZone is an IANA zone; hours default to 9 to 18 local time.
`className`	`string`	–	Extra class on the section.

ContactSectionBlock

Default export: a preview with a layout switcher. Messages are simulated and never sent.

Prop	Type	Default	Description
`variant`	`ContactSectionVariant`	`"form"`	Initial variant.

Keyboard interactions

Keys	Action
Arrow keys	Move between topic chips, which form a radio group.

Accessibility

Fields use labelled Arc Input and Textarea; errors appear after the first submit and update as you type.
A failed send shows a role="alert" message and keeps the form.
Office open status is written out, not shown by color alone.

Motion

The form card springs into the confirmation; faces slide along one axis in the direction of travel out of a soft blur.
The topic highlight glides between chips.
Reduced motion swaps faces without travel.

Responsive behavior

Container queries: below 820px the form layout stacks and the channel list becomes a horizontal scrolling row; below 520px field rows stack and the submit button fills the width.

Performance

The offices variant re-renders every 15 seconds to keep local times live; other variants have no timers.

Notes for AI

Without onSubmit the form only simulates sending; always wire it in production.
Offices compute local time and open status with Intl.DateTimeFormat in each timeZone.
Composes Arc Input, Textarea, Button, CopyButton, SegmentedControl, and Avatar.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückFAQ section WeiterBlog grid

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.