Proposed CSC Standards

Form standards

Labels, validation timing, and submission across forms.

Rules

FORM-001RequiredProposed CSC convention

Place the label above the field

Labels sit above the control, not only as a placeholder.

Text inputs Select controls Date pickers

Implementation detail

Proposed CSC Standard. The label sits above the field.

Put a visible label above the field and associate it with the control.

Check: The label is visible before and during typing.

FORM-002RecommendedProposed CSC convention

Validate after blur or submit, not on first render

Errors appear after the person leaves the field or submits.

Text inputs Application form

Implementation detail

Proposed CSC Standard. Errors on an untouched form look like a failure they did not cause.

Show the error text after blur or submit.

Check: A fresh form does not show field errors.

FORM-003RequiredWCAG

Summarize submit errors

A failed submit shows an Alert that names the fields, and focus moves to that summary or the first invalid field.

Alerts Application form

Implementation detail

WCAG 3.3.1.

Render an error summary above the fields, in text, and move focus to it or to the first invalid field.

Check: Submit with empty required fields. The summary is visible.

Source

FORM-004ProhibitedProposed CSC convention

Do not claim a draft was saved unless it was

Save draft is shown only when the product persists the draft.

Application form Buttons

Implementation detail

Proposed CSC Standard. This design system does not implement draft storage.

Omit a save-draft button until a real save exists.

Check: The UI does not say Draft saved after a local-only click.

FORM-005ConditionalProposed CSC convention

Ask before leaving a dirty form

If values changed, navigating away asks the person to confirm.

Application form Dialogs and modals

Implementation detail

Proposed CSC Standard.

Use a confirm dialog. Do not add a beforeunload string that the browser will ignore.

Applies when: The form has unsaved edits and the person follows a link away.

Check: A dirty form prompts before route change.

Examples

Label and submitCorrect implementation · TSX

The label sits above the field. Submit is a #2A338F button.

Imports: None. Dependencies: None. Rules: FORM-001.

export function ReferenceForm() {
  return (
    <form>
      <label style={{ display: 'grid', gap: 7 }}>
        Reference number
        <input required style={{ border: '1px solid #DCE3ED', borderRadius: 8, minHeight: 40 }} />
      </label>
      <button type="submit" style={{ background: '#2A338F', color: '#fff', borderRadius: 8, minHeight: 38 }}>Submit application</button>
    </form>
  );
}

Testing checklist

Labels are visible
Errors wait until blur or submit
A failed submit shows a text summary

Reusable prompts for this guideline are in the AI Development Hub.