Skip to main content

Your submission was sent successfully! Close

Thank you for signing up for our newsletter!
In these regular emails you will find the latest updates from Canonical and upcoming events where you can meet our team.Close

Thank you for contacting us. A member of our team will be in touch shortly. Close

  1. Blog
  2. Article

Lyubomir Popov
on 12 December 2022

Revisiting form elements in Vanilla Framework


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


Rajan Patel
27 June 2025

How is Livepatch safeguarded against bad actors?

Security Article

What safeguards the Livepatch security patching solution against bad actors and malicious code masquerading as an update? Learn about Secure Boot and module signing. ...


Giulia Lanzafame
26 June 2025

Accelerating data science with Apache Spark and GPUs

Data Platform Article

Apache Spark has always been very well known for distributing computation among multiple nodes using the assistance of partitions, and CPU cores have always performed processing within a single partition.  What’s less widely known is that it is possible to accelerate Spark with GPUs. Harnessing this power in the right situation brings imm ...


David Beamonte
26 June 2025

Cut data center energy costs with bare metal automation

Cloud and server Article

Data centers don’t have to be power-hungry monsters. With smart automation using tools like MAAS, you can reduce energy waste and operational costs, and make your infrastructure greener, without sacrificing performance or flexibility. ...