Revisiting form elements in Vanilla Framework
Lyubomir Popov
on 12 December 2022
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
Related posts
MongoDB® use cases for the telecommunications industry
MongoDB® is one of the most widely used databases (DB Engines, 2024) for enterprises, including those in the telecommunications industry. It provides a...
Canonical to present keynote session at Kubecon China 2024
We are excited to announce that, on the 21st of August 2024, product managers Andreea Munteanu (AI) and Adrian Matei (Managed Services) will represent...
Meet us in Sydney and let’s talk about how you can navigate your AI journey
Date: August 27, 2024 Venue: The Fullerton Hotel Sydney Time: 13:00 PM – 18:00 PM AI has officially taken off. Today, thousands of exciting projects are being...