Context
In the past year, we’ve been focusing on delivering newly designed and built form components to replace Material UI-based components (which have well-documented usability and user experience issues). The new components, alongside upcoming new patterns for constructing forms (creating forms without accordions, and using forms in overlay elements, such as Dialogs and Drawers), will underpin a modern form experience we’re excited to roll out across Octopus in 2026 and beyond.
The most commonly used form components have been released through the design system (Text Field, Textarea, Number Field, Radio, Checkbox, Select, MultiSelect, File Upload, Date Picker, Time Picker), alongside the Forms UI Pattern.
Problem
While modernizing the Octopus interface is our long-term goal, allowing new form components to be mixed with Material UI without appropriate guidance is likely to result in a more confusing user experience. Some new components are visually and functionally similar to legacy ones (e.g., Checkbox and Radio), while others differ significantly (e.g., Text Field and MultiSelect). Using legacy and new components side by side is low risk in some scenarios but high risk in others when it forces users to differentiate between two distinctly different styles and learn different interaction methods.
The design system guidance for new form components has been to assess how they look alongside legacy ones and make decisions based on that assessment. To ensure a controlled rollout of a modern form experience, the design system needs to provide more targeted usage guidance to reduce ambiguity until a rollout roadmap is finalized and discussed across teams consuming the design system.
Solution
We are pausing the use of selected new form components until further notice to prioritize a gradual, controlled release of a cohesive, modern form experience. Please refer to the Actions section to understand what steps you have to take.
Actions
For designers and engineers
- For current and soon-to-be-released work, use form components as specified in the usage advisory in the table below
- Do not use new Text Field, Textarea, Number Field, Date Picker, Time Picker, Select, and MultiSelect until advised to do so through the design system communications (exception: long-term, vision-setting work that’s not likely to be built in 2026)
For engineers
- Lint rules have been implemented for the affected component to guide usage towards the recommend replacements
For managers and leaders
- Please be aware of the change to the form experience rollout and guide your teams accordingly to follow the design system guidance
Form components usage advisory
|
UI element |
Component to be used |
|---|---|
|
Radio Group |
Radio Group (New) |
|
Checkbox |
Checkbox (New) |
|
File Upload |
File Upload (New) |
|
Text Field |
Text (Material UI) |
|
Textarea |
Text Multiline (Material UI) |
|
Number Field |
Number Picker (Material UI) |
|
Select |
|
|
MultiSelect |
|
|
Date Picker |
Date Picker (Material UI) |
|
Time Picker |
Frequently asked questions
We’ve already released some form components that aren’t intended for production use. What do we do now?
Nothing! Any already implemented form components should stay in place; there is no need to revert to Material UI as long as we pause further spread that might contradict how the modern form experience will be rolled out.
When will we be able to use the new components?
We don’t have a firm answer yet. We are working on a modern form experience pitch, a phased delivery timeline, and additional UI Pattern guidance for constructing complex forms. We’ll hold discussions with each team to discuss their needs and potential release schedules once all the details are finalized. All project updates will be posted in #project-modern-form-experience Slack channel and #feed-design-system (if relevant).