# Dynamic Checkboxes

Jul 29, 2019

Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.

What if we could make everyday checkboxes more beautiful and more intuitive? It’s easier than you think. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.

Let’s get into it.

## What we are building

Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.

See the Pen Custom Checkbox Items by Bradley Taunt (@bradleytaunt) on CodePen.

## The Structure (HTML)

As always, we will start by breaking down the “bones” of the HTML structure for this checkbox form. Let’s take a look at the HTML in it’s entirety (don’t worry, it is a lot more simple than it seems at first glance):

### The checkbox inputs & labels

1. This input will be hidden via position:absolute by default. All checkbox inputs need to share the same name value and all checkboxes require their our custom id that will link with the corresponding for value on the label.

2. This label needs it’s for value to correspond with it’s partnered checkbox.

• i) The first span holds the title and description information of the add-on
• ii) The last span holds the cost associated with the current add-on

### The total cost container output

1. A simple div with a class we can easily target later

2. A div parent container is needed to house all the total spans together (more on this when we get into the CSS)

• i) The first span holds the static currency symbol
• ii) The second span is where our updated cost will be injected
• iii) This input field is required for us to take-in the value of the associated :checked inputs and add them together. This current value is then used for the injection into the second span
• iv) The final span simply holds the static monthly duration content

All that’s all we need for the HTML!

## The Visuals (CSS)

Again, lets take a look at the entire file before we break it down step-by-step:

### The custom checkbox input

We need to hide the browser’s default checkbox input and replace it with our own using pseudo selectors.

### The total cost container

We only need some very basic flexbox styling for our bottom “total” container:

### Last but not least - mobile

Now we just ensure that on smaller devices our checkbox labels render nicely:

That’s it for the styling!

## The Function (JS)

As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost “injection”.

That’s it! Feel free to play with the demo some more at the top of the post, or check out the CodePen source directly.

← Back to all articles

If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.