Version: latest

Works everywhere

Form works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/form) — the library detects the runtime automatically.

Form

Form wraps a <form> element and provides validation orchestration, a submission loading state, and an accessible error summary. Use Form as the root container for Input, Select, Checkbox, and other form fields.

Live demo →

Overview

import { Form } from "@prokodo/ui/form"
;<Form
  label="Contact Form"
  fields={[
    {
      id: "email",
      fieldType: "input",
      label: "Email",
      type: "email",
      required: true,
    },
    { id: "message", fieldType: "input", label: "Message" },
  ]}
  onSubmit={fields => submitToApi(fields)}
  button={{ title: "Send message" }}
/>

Live PreviewOpen in Storybook ↗

Import

import { Form } from "@prokodo/ui/form"

CSS:

import "@prokodo/ui/form.css"

Props

Prop	Type	Default	Required	Description
`label`	`string`	—	✅	Form title / label (rendered as headline).
`fields`	`FormField[]`	—	—	Array of field definitions rendered in the form.
`defaultFields`	`FormField[]`	—	—	Default field values when `fields` is not provided.
`button`	`FormButton`	—	—	Submit button config (`Omit<ButtonProps, "title"> & { title? }`).
`color`	`FormVariants`	—	—	Accent color variant.
`disabled`	`boolean`	`false`	—	Disable all form fields.
`hideHeadline`	`boolean`	`false`	—	Hide the form title headline.
`hideResponse`	`boolean`	`false`	—	Hide the success / error message after submission.
`headlineProps`	`HeadlineProps`	—	—	Props forwarded to the headline `Headline` component.
`messages`	`FormMessages`	—	—	Form-level success / error messages (`{ message?, errors? }`).
`messagesFields`	`FormFieldMessages`	—	—	Field-level error translation overrides.
`onSubmit`	`(fields: FormField[]) => void`	—	—	Called with validated fields on form submission.
`onChangeForm`	`(field: FormField) => void`	—	—	Called whenever any field value changes.
`className`	`string`	—	—	CSS class on root element.

See src/components/form/Form.model.ts for the full FormProps type.

Design Tokens

Form does not define its own CSS custom properties. Appearance is controlled by the individual field components. See Input, Select, and other field pages for their token references.

AIC Note

Use the standard import path in application code:

import { Form } from "@prokodo/ui/form"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.3.5	Identify Input Purpose (AA)	🔍 Manual review	Form fields collecting personal data must expose their purpose via the HTML autocomplete attribute.
2.1.1	Keyboard (A)	🔍 Manual review	All functionality must be operable via keyboard alone, without requiring specific timing.
3.3.1	Error Identification (A)	🔍 Manual review	Input errors must be identified and described to the user in text, not by colour alone.
3.3.2	Labels or Instructions (A)	🔍 Manual review	Every form input requires a programmatically associated label or a visible instruction.
3.3.7	Redundant Entry (A)	🔍 Manual review	Information already entered in the same session/process must not be required again unless it serves a distinct purpose.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 8 test file(s) · 6 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Form in Storybook

Source

src/components/form/Form.model.ts