Your submission was sent successfully! Close

You have successfully unsubscribed! Close

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

Revisiting form elements in Vanilla Framework

Lyubomir Popov

on 12 December 2022

This article is more than 1 year 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

Talk to us today

Interested in running Ubuntu in your organisation?

Newsletter signup

Get the latest Ubuntu news and updates in your inbox.

By submitting this form, I confirm that I have read and agree to Canonical's Privacy Policy.

Related posts

Pair Programming: The Ubuntu Way

At our core, we believe in Ubuntu: “I am what I am because of who we all are.” This philosophy of interconnectedness is woven into everything we do, including...

Solving newcomer data science challenges with Canonical’s Data Science Stack – now in beta

Data science is one of the most exciting topics of the last century. With its utility in industries of all kinds, it’s easy to see why it has been rated as...

World’s first RISC-V Laptop gets a massive upgrade and equips with Ubuntu

DeepComputing partners with Canonical to unveil a huge boost to the DC-ROMA RISC-V Laptop family  The DC-ROMA RISC-V Laptop II is the world’s first RISC-V...