19 May 2023


2 Mins


UI Design

Designing a detailed checkbox component

Designing a detailed checkbox component

Designing a detailed checkbox component

I recently designed a new, detailed checkbox component for our design system. I was working on a new feature that would introduce some new user roles, increasing the number of roles from two to four. Accommodating these new roles and maintaining and easy-to-understand interface was going to be challenging with our existing checkboxes, so I took the opportunity to build something

When a user is inviting a new user to join their team, they would see a field prompting them to select the new users role. The checkbox content was the name of the role, and then the role descriptions were included as a field hint.

Mockup of the old checkbox field. It has a field label 'Role'. Two checkboxes 'Admin' and 'Member' and a field hint describing those roles

As we were introducing two new roles, the differences between the now four roles became more subtle making the role descriptions more important. Relying on a field hint to describe four wasn’t really an option any more - the hint would span several lines and a short paragraph of text would be visibly overwhelming and difficult to scan

The aim therefore was to design a new type of checkbox that would allow us to display the role description, alongside the role itself as a way of a) avoiding a paragraph of text explaining roles, and b) providing context-in-situ to reduce the risk of a user selecting the wrong role having missed or misread the role description

I explored a couple of options but fairly quickly settled on what I’ve now christened, a "detailed checkbox".

The detailed checkbox component with four user roles and their accompanying descriptions

Roles are always displayed as coloured labels to allow the user to more quickly scan the page content, so in the interest of consistency, I used the same labels and followed them up with the role description

I added a checkbox icon and a left-border colour change to indicate the `checked` state, and to ensure this component would be reusable outside of user roles, added disabled states, and created a variant that uses a text title instead of a label.

The detailed checkbox field in situ in an 'invite team member' modal

Thanks for reading!

Alex :)

More from this category.

Website designed & built by ninethreeone

Website designed & built by ninethreeone

Website by ninethreeone