{ email: "already used" }components / 36
marked form
a form is a conversation with consequences. sections pace it, errors point back, and submission leaves one clear trace.
shadcn
npx shadcn@latest add berkantay/cheez/marked-formlive workflow
submit taken@cheez.dev to rejectfrom first field to server response
form / 01
error ownership
one object, two useful viewsthe server speaks through the field
Base UI associates the external message with the matching named field.
each message is a real link to the invalid control, not decorative copy.
feedback
live regions stay conciseone state, one visual sentence
reference
Base UI behavior, Cheez compositionapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Form | validationMode | "onSubmit" | "onBlur" | "onChange" | "onSubmit" | when field validation begins |
| Form | errors | Record<string, string | string[]> | — | external or server errors by field name |
| Form | onFormSubmit | (values, details) => void | — | validated submission callback |
| Form | actionsRef | RefObject<FormActions> | — | validate all fields or one field |
| Form | layout | "stack" | "grid" | "stack" | form-level composition |
| Form | tone | MarkedFormTone | "orange" | action and legend ink |
| Section | color | string | "#35d9ff" | section divider ink |
| Legend | eyebrow | ReactNode | — | small section index |
| Actions | align | "start" | "end" | "between" | "end" | action placement |
| Status | state | "idle" | "pending" | "success" | "error" | "idle" | live submission feedback |
| ErrorSummary | errors | Record<string, string | string[]> | — | linked error overview |
behavior notes
- onFormSubmit only runs after every registered field is valid
- native FormData becomes a typed values object without a second form library
- external errors stay controlled and are cleared deliberately
- status uses polite announcements except errors, which are assertive
- fieldset and legend remain native semantic elements
- submit and reset remain native button types
- no Framer Motion is shipped