Microsoft Edge Insider will use Fluent Design for form controls (and you can enable it today)

Fluent Design System

Microsoft has now released the first public builds of its Chromium-based Edge browser remake. Although this early preview doesn’t deviate too far from Chromium’s default design, there’s evidence that Microsoft is planning to further differentiate the look and feel of its implementation.

Enabling Fluent Controls in Edge Insider

Buried in Edge Insider’s flags menu is a “Fluent Controls” option. Per its label,

If enabled, form elements will be rendered using an alternative style to align with Microsoft’s design language to improve touch and keyboard accessibility.

Evidently, Microsoft is planning to bring its Fluent Design language into the browser, making forms in Edge look more like their counterparts in Universal Windows apps. Currently, Edge Insider uses Chromium’s built-in, silver-tinted controls (pictured below) for all form components.

Chromium's default controls

You can enable the flag today (it’s called “Fluent Controls”) to get a first look at the Fluent-themed inputs. However, we wouldn’t recommend it, as it seems the implementation is far from finished. Only a handful of controls are changed by enabling the flag, with most retaining Chromium’s built-in styles.

Enabling Fluent controls in Edge Insider currently makes things look a little broken... (April 2019)

Those that do change (pictured above) still look nothing like Fluent Design’s Windows controls. Overall, the flag tends to make things look broken, with select boxes in particular gaining an odd silver background colour.

Enabling Fluent controls in Edge Insider currently makes things look a little broken... (April 2019)

None of this can be criticised at this stage – Edge Insider is still a long way off release, and it’s clear the implementation of Fluent Design within Chromium has only just begun. This flag will be one to watch in the next Edge Dev builds, as Microsoft begins to bring Chromium into visual parity with EdgeHTML.

Share This
Further reading: , , ,