Single select (dropdown)

Allows users to select one option from a predefined list

Examples

Usage

Research shows some users find single selects clunky and hard to use. It’s generally best to consider other input options first. Single selects are often overused in Turas forms. Before choosing a component that allows user to make a selection, think about whether a different component would be more user-friendly.

Do:

match the select width to the length of the longest option rather than stretching it to other fields' widths
consider alternative form components like radio buttons for better usability
use a text box with autocomplete if users likely know what they're searching for
use a single select for 5 to 15 options
include a clear, descriptive label beside the single select using the <label> tag
use short, descriptive option labels
provide an instructive placeholder inside the single select, e.g. 'Select NHS Board' rather than '--Please select--'
sort options from the user's perspective, usually alphabetically or numerically, unless another pattern suits better
support keyboard input to select visible options or jump to options starting with a typed letter
use single select when the default option is recommended
group related options with a distinct hierarchy using the <optgroup> tag for easier scanning but don't rely on it for critical info as screen readers may ignore it

Avoid:

using a single select for lists with more than 15 options, instead reduce the number of options or use a text input, autocomplete, or a multi select
using a single select with four or fewer options, instead use stacked radio buttons instead
choosing a single select for data that is highly familiar to users, such as a date of birth
adding functionality to allow the user to select multiple options
starting with a default selection unless at least 80-90% of users are likely to select that value
when you want to emphasise options that have no clear default or recommended value, or when options are unfamiliar and require careful reading
when the user needs to view a clear comparison of their options
using select for navigation unless a form submit button is positioned next to it

References

Gov.UK Design System
Select

Neilson Norman Group
Dropdowns: Design Guidelines

Please correct the errors and try again.

Single select


            <turas-select-list asp-for="SingleSelect" asp-items="SingleSelects"></turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="SingleSelect">Single select</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelect" name="SingleSelect"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
<option value="7">List item seven</option>
<option value="8">List item eight</option>
<option value="9">List item nine</option>
<option value="10">List item ten</option>
<option value="11">List item eleven</option>
<option value="12">List item twelve</option>
<option value="13">List item thirteen</option>
<option value="14">List item fourteen</option>
<option value="0">List item fifteen</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelect" data-valmsg-replace="true"></span>
</div>

Single select required


            <turas-select-list asp-for="SingleSelectRequiredSelect" asp-items="SingleSelectRequiredSelects">
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredSelect">Single select required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select required field is required." id="SingleSelectRequiredSelect" name="SingleSelectRequiredSelect"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredSelect" data-valmsg-replace="true"></span>
</div>

Single select guidance text

I am some guidance text


            <turas-select-list asp-for="SingleSelectGuidanceTextSelect" asp-items="SingleSelectGuidanceTextSelects" guidance-text="I am some guidance text">
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectGuidanceTextSelect">Single 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" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select guidance text field is required." id="SingleSelectGuidanceTextSelect" name="SingleSelectGuidanceTextSelect"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectGuidanceTextSelect" data-valmsg-replace="true"></span>
</div>

Single select guidance text accordion

A paragraph.

List item
List item
List item


                <turas-select-list asp-for="SingleSelectGuidanceTextAccordionSelect" asp-items="SingleSelectGuidanceTextAccordionSelects">

                    <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 requiredFieldMarker  " for="SingleSelectGuidanceTextAccordionSelect">Single 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-01a1beb1-b59f-4521-950a-cefc73876bd7" aria-expanded="false" aria-controls="collapse-01a1beb1-b59f-4521-950a-cefc73876bd7"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-01a1beb1-b59f-4521-950a-cefc73876bd7">   
                <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="false" data-val="true" data-val-required="The Single select guidance text accordion field is required." id="SingleSelectGuidanceTextAccordionSelect" name="SingleSelectGuidanceTextAccordionSelect"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectGuidanceTextAccordionSelect" data-valmsg-replace="true"></span>
</div>

Single select with search


            <turas-select-list asp-for="SingleSelectWithLiveSearch" asp-items="SingleSelectWithLiveSearchs" live-search>
            
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectWithLiveSearch">Single select with search</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="true" data-val="true" data-val-required="The Single select with search field is required." id="SingleSelectWithLiveSearch" name="SingleSelectWithLiveSearch"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectWithLiveSearch" data-valmsg-replace="true"></span>
</div>

Single select form field width


            <turas-select-list asp-for="SingleSelectFormFieldWidth" asp-items="SingleSelectFormFieldWidths" field-column-widths="col-md-4">

            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectFormFieldWidth">Single select form field width</label>
<div class="col-md-4">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select form field width field is required." id="SingleSelectFormFieldWidth" name="SingleSelectFormFieldWidth"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectFormFieldWidth" data-valmsg-replace="true"></span>
</div>

Single select additional classes


                <turas-select-list asp-for="SingleSelectAdditionalClasses" asp-items="SingleSelectAdditionalClassess" additional-classes="mt-10">

                </turas-select-list>


                <div class="form-group form-select-list mt-10"><label class="control-label   " for="SingleSelectAdditionalClasses">Single select additional classes</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectAdditionalClasses" name="SingleSelectAdditionalClasses"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectAdditionalClasses" data-valmsg-replace="true"></span>
</div>

Single select in a row

Single select in a row


            <div class="row">
                <div class="col-md-6">
                    <turas-select-list asp-for="SingleSelectInARowOne" asp-items="SingleSelectInARowOnes">

                    </turas-select-list>
                </div>
                <div class="col-md-6">
                    <turas-select-list asp-for="SingleSelectInArowRowTwo" asp-items="SingleSelectInARowTwos">

                    </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="SingleSelectInARowOne">Single select in a row</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectInARowOne" name="SingleSelectInARowOne"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectInARowOne" data-valmsg-replace="true"></span>
</div>
                </div>
                <div class="col-md-6">
                    <div class="form-group form-select-list "><label class="control-label   " for="SingleSelectInArowRowTwo">Single select in a row</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectInArowRowTwo" name="SingleSelectInArowRowTwo"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectInArowRowTwo" data-valmsg-replace="true"></span>
</div>
                </div>
            </div>

Single select in a row required

Single select in a row required


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="SingleSelectRequiredInARowOne" asp-items="SingleSelectRequiredInARowOnes">

                        </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="SingleSelectRequiredInArowRowTwo" asp-items="SingleSelectRequiredInARowTwos">

                        </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="SingleSelectRequiredInARowOne">Single select in a row required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select in a row required field is required." id="SingleSelectRequiredInARowOne" name="SingleSelectRequiredInARowOne"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredInARowOne" 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="SingleSelectRequiredInArowRowTwo">Single select in a row required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select in a row required field is required." id="SingleSelectRequiredInArowRowTwo" name="SingleSelectRequiredInArowRowTwo"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredInArowRowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Single select required hide validation message


                <turas-select-list asp-for="SingleSelectRequiredHideValidationMessage" asp-items="SingleSelectRequiredHideValidationMessages" hide-validation-message>
                </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredHideValidationMessage">Single select required hide validation message</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select required hide validation message field is required." id="SingleSelectRequiredHideValidationMessage" name="SingleSelectRequiredHideValidationMessage"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
</select>
</div>

</div>

Single select disabled


                <turas-select-list asp-for="SingleSelectDisabled" asp-items="SingleSelectsDisabled" asp-is-disabled="True"></turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="SingleSelectDisabled">Single select disabled</label>
<div class="col">
<select class="form-control turas-select2" disabled="disabled" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectDisabled" name="SingleSelectDisabled"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
<option value="7">List item seven</option>
<option value="8">List item eight</option>
<option value="9">List item nine</option>
<option value="10">List item ten</option>
<option value="11">List item eleven</option>
<option value="12">List item twelve</option>
<option value="13">List item thirteen</option>
<option value="14">List item fourteen</option>
<option value="15">List item fifteen</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectDisabled" data-valmsg-replace="true"></span>
</div>

Single select hide label


                <turas-select-list asp-for="SingleSelectHiddenLabel" asp-items="SingleSelectsHiddenLabels" hide-label></turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   sr-only" for="SingleSelectHiddenLabel">Single select with hidden label</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectHiddenLabel" name="SingleSelectHiddenLabel"><option value="">Select dropdown label</option>
<option value="1">List item one</option>
<option value="2">List item two</option>
<option value="3">List item three</option>
<option value="4">List item four</option>
<option value="5">List item five</option>
<option value="6">List item six</option>
<option value="7">List item seven</option>
<option value="8">List item eight</option>
<option value="9">List item nine</option>
<option value="10">List item ten</option>
<option value="11">List item eleven</option>
<option value="12">List item twelve</option>
<option value="13">List item thirteen</option>
<option value="14">List item fourteen</option>
<option value="15">List item fifteen</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectHiddenLabel" data-valmsg-replace="true"></span>
</div>

Parameters for turas-select-list

asp-for - binds the select list to a model property
asp-items - specifies the items to be displayed in the select list
guidance-text - provides additional guidance for the user
live-search - enables a live search feature within the select list
field-column-widths - sets the column width for the select list
additional-classes - allows for additional CSS classes to be applied
hide-validation-message - suppresses validation messages for the select list
asp-is-disabled - disables the select list, making it unselectable
hide-label - hides the label for the select list

Previous

Radio button

Next

Text box

Was this page helpful?