Revisiting form elements in Vanilla Framework


This article is more than 2 years old.

Over the years, we’ve identified a number of areas for improvement when it comes to the basic building blocks of a form – inputs, buttons, etc:

  • Long-standing complaints that inputs and buttons are too similar and therefore hard to distinguish
  • “Noisiness” of long forms caused by the presence of borders around all sides of inputs and buttons

Last cycle, our proposal for updated form elements was discussed and approved, and in this iteration, we worked on implementing it in Vanilla, our front-end framework.

Before Vanilla 3.9:

After Vanilla 3.9:

  • We’ve reduced the number of borders (all around) to the minimum required to satisfy WCAG contrast ratio requirements for interactive elements
  • We’ve removed round corners from buttons and other elements, as part of a wider push to align better with the work of our Brand team
  • We’ve introduced subtle transitions when interacting with form elements

This update also affects components that build on the functionality of form elements, like our search and Filter component:

The updated style was released as part of Vanilla 3.9.0 release.

Version 3.9.0 has just been released. You can see the updated form elements in action here

Related posts


Massimiliano Gori
2 July 2025

Source to production: Spring Boot containers made easy

Article Cloud and server

This blog is contributed by Pushkar Kulkarni, a Software Engineer at Canonical. Building on the rise in popularity of Spring Boot and the 12 factor paradigm, our Java offering also includes a way to package Spring workloads in production grade, minimal, well organized containers with a single command. This way, any...

Massimiliano Gori
2 July 2025


Massimiliano Gori
2 July 2025

Spring support available on Ubuntu

Article Cloud and server

This blog is contributed by Vladimir Petko, a Software Engineer at Canonical. The release of Plucky Puffin earlier this year introduced the availability of the devpack for Spring, a new snap that streamlines the setup of developer environments for Spring on Ubuntu. In this blog, we’ll explain what devpacks are and...

Massimiliano Gori
2 July 2025


Rajan Patel
2 July 2025

Live Linux kernel patching with progressive timestamped rollouts

Article Security

In internet connected environments, where Ubuntu instances can reach livepatch.canonical.com, Livepatch Client supports timestamp-based rollout configurations. Organizations can implement controlled and predictable update pipelines from staging to production environments, without the hassle of deploying a self-hosted...

Rajan Patel
2 July 2025