How to Perfect Your UI with Multiple Checkboxes (Vue.js)

Sometimes when there are too much stuff on the app, the interface might not look so perfect — and my perfectionist being just can’t let it go…

Overview

• Intro
• Control your checkbox layout using v-row and v-vol
• Create checkboxes of a long list of choices
• The cheat sheet (list of useful external links)

Intro

After spending hours attempting to adjust and rearrange stuff on my app interface accordingly to our designers (and thankfully I succeeded), I just thought it would be mice to write down something here again. I’m sure someone might have a better code than me, but if you’re in with some extent of brute-force with me, then this post will probably help you :)

The final version after I finished adjusting the checkboxes.

In case you are a new reader of mine (and supposed you don’t know what this app I was writing does), check out my first post here, including how I stepped into the developer life, as well as some background about this melanoma-related application.

Since the texts in the picture are all in Thai, I’ll explain briefly to English users. This is the section to fill out patient information, including personal health conditions (e.g. diabetes, cancers), and past melanoma record in the patient’s family.

Before getting started

I used Vuetify for the components here in this article. So, if you have never used Vuetify, go to this link: Get started with Vuetify — Vuetify (vuetifyjs.com). You can look around for installation guides, as well as the examples and API of the components.

** Note that my code here includes only UI, not actually works systematically yet.

Rearrange checkboxes using v-row and v-col

First part I’m going to talk about is how to place checkboxes, when each item has two choices or more that can be ticked.

Sample of the health condition checkboxes. The bold header says ‘health conditions’, and the list includes ‘diabetes’, ‘hypertension’, ‘hyperlipidemia’, and ‘taking immunosuppressants’; the user checks the boxes on the right side if they have that condition, or if they are taking any medications.

First of all, the components that play main role here is v-row and v-col. Both of them are content holder components that control the layout of our content, and the important rule is that v-col must be a direct child of v-row. For the part shown in the picture, there are 5 v-row’s, and each v-row has 3 v-col’s. Write out 5 separated v-row’s, include 3 v-col’s inside each of them, then put the text or the checkbox inside each of the v-col.

Code sample

If the spaces between each column/row looks weird, you can try:

• using no-gutters prop in the v-row component,
• adjusting spacing with utility classes,
• using cols prop to adjust the column width.

Create checkboxes of a long list of choices

App UI where the patient is asked about their cancer record. There are multiple types of cancer to be chosen (e.g. lung, intestinal), and the patient is also asked whether they are receiving any treatment such as chemotherapy and radiotherapy.

Since there are a long list of cancer choices, first I put them into an array before putting them into the data function:

Now we are ready to brute-force our template block. Just like the above part, put things into separated v-row, and each v-row has multiple v-col’s in it. But now we don’t have to specify the number of columns in each row, but using v-for instead.

Code sample

If you already know programing, you might probably know something like for-loop already. Basically, we will tell the program to iterate through a set of elements, which in this case it’s cancerList, an array of cancer types. Using v-for, you have to assign a key to represent each element of the array. Looking at the code, you will see that in the first v-row, I iterate through cancerList.slice(0, 3) (cancerList elements with index 0,1,2 — if you struggle to understand this, you might wanna look up some JavaScript basis), and I called each element, cancer.

And same as the previous example, you can try adjusting the spacings using props such as no-gutters or utility classes.

The cheat sheet XD

To wrap up this post, I’ll list some of the useful external links again so you readers can go checkout:

• Get started with Vuetify — Vuetify (vuetifyjs.com) (if you are new to Vuetify).
• v-row’s API and v-col’s API
• Vuetify’s grid system (it tells you how to use v-row and v-col together).
• Guide to list rendering using v-for
• Bootstrap utility class for spacing

Have fun coding :)