CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Application form

The multi-step application wizard.

Collect a longer application in ordered steps with validation.

Live componentResponsive playground

What this describes

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Default
  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit
Multi-step

When to use

  • A process with more than one step and a review before submit.

When not to use

  • One or two fields. Use a single form with Input and Button.

Allowed variants

Multi-step

The packaged application flow.

Hierarchy
Stepper plus fields plus actions.
Use in
Long applications.
Restriction
Validate before Next.
Accessibility
Labels and errors.
Responsive
wizard-grid becomes one column under 760px.

Mandatory rules

FRM-001RequiredWCAG

Validate the current step before continuing

Next does not advance while required fields on the step are invalid.

Implementation detail

WCAG 3.3.1 and 3.3.3. ApplicationWizard uses the form resolver for this.

Use ApplicationWizard or the same react-hook-form and zod pattern. Show errors on the fields.

Check: An empty required field blocks Next and shows the message.

Source

FRM-002RequiredWCAG

Name every field

Each step uses Input, SelectField, or DateField with labels.

Implementation detail

WCAG 3.3.2.

Do not add an unlabeled input inside the wizard.

Check: Every control has a visible label.

Source

FRM-003RecommendedProposed CSC convention

Confirm before the final submit

The last step reviews the values and uses a submit button.

Implementation detail

Proposed CSC Standard. A multi-step form that submits on Next of the last editable step is easy to trigger early.

Keep a review step. The commit button is type="submit" and variant primary.

Check: The final action is a submit button on the review step.

FRM-004ConditionalProposed CSC convention

Warn before discarding typed values

Leaving a dirty step asks the person to stay or leave.

Implementation detail

Proposed CSC Standard. There is no approved CSC policy for drafts. Do not claim the wizard saves a draft unless the product implements it.

Use a confirm dialog. Do not invent a save-draft API.

Applies when: The person has entered values and activates a link that leaves the wizard.

Check: Navigating away from a dirty form asks for confirmation.

Restrictions

  • FRM-004 Warn before discarding typed values. The person has entered values and activates a link that leaves the wizard.

Accessibility

  • Labels on every field.
  • Errors are text.
  • The step indicator names the current step.

Responsive behavior

  • The two-column field grid becomes one column under 760px.
  • Actions wrap. Submit remains reachable.

Component states

Editing

Fields on the current step are editable.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Invalid

Errors show and Next does not advance.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Review

Values are shown before submit.

  1. 1Details
  2. 2Requirements
  3. 3Review
  4. 4Submit

Correct implementation

Application wizardIntegration example · TSX

One step is visible. The primary action is a #2A338F button. Each field has a label.

Imports: None. Dependencies: None. Rules: FRM-001, FRM-002.

export function Apply() {
  return (
    <form>
      <label>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: 43 }}>Continue</button>
    </form>
  );
}

Incorrect implementation

No incorrect example is published for this component.

Common mistakes

  • Advancing with empty required fields.
  • A submit button on every step.
  • Claiming a draft was saved when it was not.

Testing checklist

Agent prompts for this component are in the AI Development Hub.