Select (dropdown)

Open this example in a new window

Sample HTML

<div>
    <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">
            <option></option>
            <option>Accordion</option>
            <option>Breadcrumbs</option>
            <option>Button</option>
        </select>
        <span class="ds_select-arrow" aria-hidden="true"></span>
    </div>
</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 the original page path and a data attribute showing category and the the value selected, for example data-form="select-component-accordion"

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top