Multi select (dropdown)

Offers a searchable and scrollable dropdown that allows users to select multiple values.

Examples

Usage

The multi-select component offers a customisable selection box that supports searching. It also enables multi-value selection, allowing users to seamlessly combine typing and scrolling to locate the desired items.

While multi select dropdowns can be powerful tools for user input, approach them with care. This interaction model which combines typing, scrolling, and selection can be confusing, particularly if feedback and validation are unclear. Users may also struggle with discoverability, not realising that multiple selections are possible without clear visual cues.

Thoughtful design and testing are essential to ensure this component enhances rather than hinders the user experience.

Do:

match the select width to the length of the longest option rather than stretching it to other fields' widths
provide clear instructions or labels so users understand they can select multiple items
keep the list of options manageable to avoid overwhelming users
include search to help users find options quickly
test for keyboard and screen reader support
usability test with your users to check this component is usable for them

Avoid:

relying on this component if selections are complex or require detailed context, as multi select can be confusing
using it for very small sets of options where simple checkboxes would be better
overloading it with too many features or large data sets without testing performance and usability
using it as the default multiple selection tool
using mandatory multi select fields without clear guidance

Please correct the errors and try again.

Required fields are marked with an asterisk

Multi select


                <turas-select-list asp-for="MultiSelect" asp-items="MultiSelects" multiple live-search placeholder="Please select">  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelect">Multi select</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelect" name="MultiSelect"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelect" data-valmsg-replace="true"></span>
</div>

Multi select required


                <turas-select-list asp-for="MultiSelectRequired" asp-items="MultiSelectRequireds" multiple live-search placeholder="Please select">  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectRequired">Multi select required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" data-val="true" data-val-required="The Multi select required field is required." id="MultiSelectRequired" name="MultiSelectRequired"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectRequired" data-valmsg-replace="true"></span>
</div>

Multi select guidance text

I am some guidance text


                <turas-select-list asp-for="MultiSelectWithGuidanceText" asp-items="MultiSelectWithGuidanceTexts" multiple live-search placeholder="Please select" guidance-text="I am some guidance text">  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithGuidanceText">Multi select guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectWithGuidanceText" name="MultiSelectWithGuidanceText"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithGuidanceText" data-valmsg-replace="true"></span>
</div>

Multi select guidance text accordion

A paragraph.

List item
List item
List item


                <turas-select-list asp-for="MultiSelectWithGuidanceAccordionText" live-search asp-items="MultiSelectWithGuidanceTextAccodrions">

                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>

                </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithGuidanceAccordionText">Multi select guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-e2110fca-58c5-497d-a86c-a4a277348cbd" aria-expanded="false" aria-controls="collapse-e2110fca-58c5-497d-a86c-a4a277348cbd"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-e2110fca-58c5-497d-a86c-a4a277348cbd">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="true" id="MultiSelectWithGuidanceAccordionText" multiple="multiple" name="MultiSelectWithGuidanceAccordionText"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithGuidanceAccordionText" data-valmsg-replace="true"></span>
</div>

Multi select with search


            <turas-select-list asp-for="MultiSelectWithSearch" asp-items="MultiSelectWithSearchs" multiple live-search placeholder="Please select">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithSearch">Multi select with search</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectWithSearch" name="MultiSelectWithSearch"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithSearch" data-valmsg-replace="true"></span>
</div>

Multi select form field width


            <turas-select-list asp-for="MultiSelecttFormFieldWidth" asp-items="MultiSelecttFormFieldWidths" multiple live-search placeholder="Please select" field-column-widths="col-md-4">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelecttFormFieldWidth">Multi select form field width</label>
<div class="col-md-4">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelecttFormFieldWidth" name="MultiSelecttFormFieldWidth"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelecttFormFieldWidth" data-valmsg-replace="true"></span>
</div>

Multi select additional classes


                <turas-select-list asp-for="MultiSelectAdditionalClasses" asp-items="MultiSelecttAdditionalClassess" multiple live-search placeholder="Please select" field-column-widths="col-md-4" additional-classes="mt-">  </turas-select-list>


                <div class="form-group form-select-list mt-"><label class="control-label   " for="MultiSelectAdditionalClasses">Multi select additional classes</label>
<div class="col-md-4">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectAdditionalClasses" name="MultiSelectAdditionalClasses"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectAdditionalClasses" data-valmsg-replace="true"></span>
</div>

Multi select in a row

Multi select in a row


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowOne" asp-items="MultiSelectInARowOnes" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowTwo" asp-items="MultiSelectInARowTwos" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectInARowOne">Multi select in a row</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectInARowOne" name="MultiSelectInARowOne"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectInARowTwo">Multi select in a row</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectInARowTwo" name="MultiSelectInARowTwo"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Multi select in a row required

Multi select in a row required


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowRequiredOne" asp-items="MultiSelectInARowRequiredOnes" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowRequiredTwo" asp-items="MultiSelectInARowRequiredTwos" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectInARowRequiredOne">Multi select in a row required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" data-val="true" data-val-required="The Multi select in a row required field is required." id="MultiSelectInARowRequiredOne" name="MultiSelectInARowRequiredOne"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowRequiredOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectInARowRequiredTwo">Multi select in a row required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" data-val="true" data-val-required="The Multi select in a row required field is required." id="MultiSelectInARowRequiredTwo" name="MultiSelectInARowRequiredTwo"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowRequiredTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Multi select hide validation message


                <turas-select-list asp-for="MultiSelectHideValidationMessage" asp-items="MultiSelectHideValidationMessages" multiple placeholder="Please select" hide-validation-message>  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectHideValidationMessage">Multi select hide validation message</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" data-val="true" data-val-required="The Multi select hide validation message field is required." id="MultiSelectHideValidationMessage" name="MultiSelectHideValidationMessage"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>

</div>

Multi select disabled


                <turas-select-list asp-for="MultiSelectDisabled" asp-items="MultiSelectsDisabled" multiple placeholder="Please select" asp-is-disabled="True">  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectDisabled">Multi select disabled</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" disabled="disabled" turas-select2-close-on-select="false" turas-select2-live-search="false" id="MultiSelectDisabled" name="MultiSelectDisabled"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectDisabled" data-valmsg-replace="true"></span>
</div>

Mult select hide label


                <turas-select-list asp-for="MultiSelectHideLabel" asp-items="MultiSelectHideLabels" multiple live-search placeholder="Please select" hide-label>  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   sr-only" for="MultiSelectHideLabel">Multi select hide label</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectHideLabel" name="MultiSelectHideLabel"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectHideLabel" data-valmsg-replace="true"></span>
</div>

Required paramaters

multiple - allows multiple selections in the select list
live-search - required on multi-select lists to ensure reliable keyboard navigation
asp-for - binds the select list to a model property
asp-items - specifies the items to be displayed in the select list

Optional parameters

placeholder - provides a placeholder text when no item is selected
guidance-text - displays guidance text below the select list
field-column-widths - sets the column width for the select list
additional-classes - adds custom CSS classes to the select list
hide-validation-message - hides validation messages for the select list
asp-is-disabled - disables the select list
hide-label - hides the label for the select list

Testing

Check that the multi select:

can be navigated with keyboard only
shows a visible focus state on the control and selected options
expanded/collapsed state of the dropdown is communicated correctly to screen readers
announces the label, role, available options and selected options correctly with screen readers
hint text or instructions are read out by screen readers
error messages are announced by screen readers and associated with the multi select
does not trigger unexpected changes while an option is selected
remains usable at 400% zoom and supports reflow without horizontal scrolling
makes it clear when selecting an option will reveal additional fields
does not create a keyboard trap when the option list is opened
communicates dynamic updates appropriately (for example, "3 options selected")
behaves consistently across supported browsers and devices

Developer considerations

When using the multi select component in your form:

use a native <select multiple> by default, opting for a custom multi-select component only when users need built-in search filtering or are selecting from a large option set
always provide a visible label using <label for=""> and an ID
make sure the multi select has a programmatic name (via label or aria-labelledby)
use aria-describedby to associate hint text and error messages with the multi select
avoid pre-selecting options unless there is a clear user benefit and it does not create a risk of unintended choices
make sure custom select components maintain native select behaviour
write error messages that explain what went wrong and how to fix it
make sure a visible focus state that meets contrast requirements
make sure the component remains usable when text is resized and content reflows
make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels

Required fields

If your form contains fields that users must complete:

clearly indicate when the multi select is required by using a visual indicator such as an asterisk
do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required and include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
make sure the required state of the multi select is programmatically available to assistive technologies using aria-required="true"

Conditional behaviour

If your multi select reveals additional content based on a user's selection:

only reveal content when it is logically dependent on the selection
do not automatically move focus when content is revealed
place revealed content directly after the multi select that controls it in the DOM
hide the content from all users, including assistive technology users, until it is needed
make sure hidden fields are not focusable
when revealed, make sure the content is reachable in the natural tab order
consider adding hint text to explain that additional fields may appear
use the Turas conditional reveal pattern so the new content is available to screen readers

Previous

Display

Next

Radio buttons

Was this page helpful?