Skill LibraryPrompt Skill1 DesignsTop Views

Form Error State Contract

Define labels, helper text, validation timing, inline errors, error summaries, submit states, server-failure recovery, mobile input behavior, and frontend state models for login, signup, checkout, settings, submission, filter, multi-step, and admin-edit forms.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Accessibility

Skill Directive

Description

TagsAccessibility

Skill Prompt

- Use for login, signup, checkout, settings forms, contribution forms, filter forms, multi-step forms, field validation, server errors, disabled/loading submit, aria-describedby, focus return, error summaries, or mobile keyboard input.
- Define a contract for every field first: visible label, helper text, required/optional copy, default value, autocomplete, type/inputMode, dependent fields, format rules, and server validation rules.
- Prioritize issues by risk: critical blocks submission or prevents screen-reader/keyboard repair, high creates bad data or re-entry, medium affects understanding and efficiency, and low is local copy or polish.
- Choose validation timing: untouched empty required fields validate on submit/continue, format errors can appear after blur, input-time feedback stays lightweight, async uniqueness checks are debounced, and submit is not disabled only because validation has not run.
- Map every error to a recovery action: field errors, field-group errors, step errors, recoverable server errors, fatal errors, and destructive confirmations each need a next step.
- Show an error summary for multiple errors, long forms, or large scroll distance; each item includes field name plus fix hint, links to the field or fieldset, and receives focus after failed submit.
- Wire accessibility completely: labels bind controls, hint/error/summary text is connected through aria-describedby or anchors, aria-invalid is true only when invalid, status messages use polite live regions, and focus return is defined.
- Treat submit behavior as a state machine: idle, dirty, validating, submitting, success, recoverable error, and fatal error; loading buttons prevent duplicate submits while keeping understandable state and retry paths.
- Check mobile type, inputMode, autocomplete, enterKeyHint, 44px targets, errored fields not hidden by keyboard/sticky header/bottom bar, and field groups that remain legible in narrow layouts.
- Deliver FormFieldContract/FormFieldGroupContract, error summary structure, validation timing table, ARIA/focus wiring, submit state matrix, mobile QA, and links to related knowledge such as transactional-form-error-recovery.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Form Error State Contract

More pages using Form Error State Contract