Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Select (dropdown)

A form field that allows users to pick a single item from a list of options.

Sample HTML

<label class="ds_label" for="component">Select a component</label>
<div class="ds_select-wrapper  ds_input--fluid-one-third">
    <select class="ds_select" id="component" name="component">
        <option value=""></option>
        <option value="accordion">Accordion</option>
        <option value="breadcrumbs">Breadcrumbs</option>
        <option value="button">Button</option>
    </select>
    <span class="ds_select-arrow" aria-hidden="true"></span>
</div>

We based our select component on the one built by GDS. Find out more about the select component on GOV.UK’s Design System.

Website analytics

Select components can be tracked through custom events and the original page path. Custom events are used as the data isn’t available at the instant an option is chosen and the clicktext could potentially contain personally identifiable information.

Tracking data attributes and events are added automatically by the Design System’s ‘tracking’ script.

Live example

Public and bank holidays (mygov.scot)

Back to top