Component

Validation summary

Top-level form feedback with status icon, field-linked items, compact copy, and optional action slot.

Validation summary is for cross-field feedback and submit blocking. Field-level messages still live on Field, Input, and composed controls.
feedback
DOM renderImage render
Validation summaryDefault
Review requiredResolve the listed fields before saving the workflow.
  • OwnerAssign a responsible operator.
  • Budget limitEnter a value between 1 and 100.
  • Reference packetTwo files are attached.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Multiple rows with mixed statuses.
Review requiredResolve the listed fields before saving the workflow.
  • OwnerAssign a responsible operator.
  • Budget limitEnter a value between 1 and 100.
  • Reference packetTwo files are attached.
Render state

Error

Submit-blocking errors with field links.
Review requiredResolve the listed fields before saving the workflow.
Render state

Success

Positive ready state.
Ready to saveAll required fields are complete and ready to submit.
  • ConfigurationNo blocking validation remains.
Render state

Mixed

Multiple rows with mixed statuses.
Review requiredResolve the listed fields before saving the workflow.
  • OwnerAssign a responsible operator.
  • Budget limitEnter a value between 1 and 100.
  • Reference packetTwo files are attached.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
titleReactNodeReview requiredSummary title.
descriptionReactNode-Short explanation below the title.
itemsreadonly ValidationSummaryItem[][]Field-linked validation rows. Serializable item shape is validated by formValidationItemSchema.
status'default' | 'error' | 'success'errorSummary status tone.
actionReactNode-Optional right-side action slot.