mi6
Forms patterns
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
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?
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.