In this tutorial we will explore creating our own custom dropdown form controls that contain checkboxes to allow for multiple choices, or radio buttons to allow for singular choices. We’re using bootstrap in the example HTML, but that’s not a strict requirement if you’d prefer to style your form’s elements yourself.

To control for single-choice questions, we can use radio buttons and some markup such as the following:

To allow for multiple choices, we can use checkboxes instead:

We’ll want to initially hide the contents of our dropdown form control, and set the initial state of a border on the bottom of the trigger, along with its corner radiuses and other styles.

We can also style our placeholder text for other form elements such as text inputs, to match their text color to ours.

We may want to hide the label text for other form elements as well.

We’ll need to use JavaScript to open and close the dropdown form controls. We’re using jQuery in this example but the same could be rewritten in vanilla JavaScript.

We’ll also use some script to control the functionality when the user toggles the “No Preference” checkbox in our multiple select dropdown form control. When the user checks this checkbox it should uncheck all of the other checkboxes, and when they check any other checkbox, we’ll want to uncheck this checkbox.

You can check out an example below.

View Demo »