Forms patterns

[MI6-451]

Summary

Patterns for displaying forms including layout and best practice.

💬 Description

Additional examples and improvements to the form layout patterns detailed on the design system website.

Consider forms layouts including:

• Single column
• Dual column (X) We believe dual column is bad practice (supported by Google)

Consider form containers:

• Form on page
• Form in dialog
• Form in drawer
• Form in section

Consider multi-page forms:

• Using stepper
• Using detail list

Consider:

• Form guidance
• Info callouts
• Required vs optional flagging
• Dynamic form sections (progressive disclosure)
• Form submission controls
• Save, edit, review.
• Submission complete screen.
• Responsiveness.
• Accessibility - screen reader nav
• Accessibility - keyboard navigation, landmarks etc.

💰 Use value

Additional and/or improved examples of form layouts will allow developers to gain a better understanding of what their own implementations should achieve.

Additional info

Related stories

189

222

203

https://github.com/mi6/ic-ui-kit/issues/465

[GCHQ-Developer-094]

Docs now complete and ready to be implemented on guidance site.

[GCHQ-Developer-299]

Fair amount of uncertainty as to what needs developing. Questions: How many form patterns do we need to make? (Single Page, MultiPage, ???) Are there up to date design files for us to work from?

[GCHQ-Developer-094]

It's replacing the current pattern guidance for forms layout from the document that can be found on our internal file share; please reach out to GCHQ-Developer-094 for confirmation.