How to Create Multi-Select Select Box in HTML?

In HTML, the <select> element is used for selecting a single option in a list of options:

<select>
    <option value="rock" selected>Rock</option>
    <option value="pop" selected>Pop</option>
    <option value="country">Country</option>
    <option value="hip-hop">Hip-Hop</option>
    <!-- ... -->
</select>

However, if you specify the "multiple" attribute on the HTML <select> element, then it will create a multi-select options list:

<select multiple>
    <option value="rock" selected>Rock</option>
    <option value="pop" selected>Pop</option>
    <option value="country">Country</option>
    <option value="hip-hop">Hip-Hop</option>
    <!-- ... -->
</select>

With the multiple attribute specified on the <select> element, users will be allowed to select multiple options. For example, on a desktop browser, this is typically doable by holding down the SHIFT, CTRL or CMD key on the keyboard and selecting multiple options, while on mobile the same is achieved by tapping on multiple values.

Please note that some server-side languages might require that you suffix the name attribute of the multi-select element with square brackets ([]). This is so that they're able to pick up all selected values of the multi-select on the server-side, when they're submitted.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.