Skip to main content
Digitaltableteur

Design system components

ContactForm

Full contact form with validation, attachments, and submission flow.

Status: beta. Group: form. Markdown version: /design-system/components/contact-form.md

When to use

The full contact form with validation, attachments, and submission flow against the contact API. Page-level organism; for the live contact page's editorial styling see ContactFormEditorial.

When not to use

  • Do not pass props. The component intentionally accepts none. If you need a variant, compose smaller atoms at the pattern layer.
  • Do not swallow the /api/contact endpoint. The submit handler expects that endpoint specifically; redirecting it requires changing the rate-limiting, telemetry, and email plumbing too.
  • Do not remove the honeypot. It catches a meaningful share of bot submissions without any user-facing UX cost.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

This component takes no props.

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

ContactForm keyboard behaviour
KeyBehaviour
TabMoves focus to the control and on to the next focusable element. (standard)
EnterActivates the focused control. (standard)
SpaceActivates or toggles the focused control. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

ContactForm rules
LevelRuleHow it is checked
MUSTARIA: Labels on all fields.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Error messages associated.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-05-26.

Install and import

  • In-repo only. ContactForm is not exported from @digitaltableteur/react, so there is no public import path.

Links