Skip to main content

Select

This component exists as a way of providing limited support to the standard HTML <select> tag. Not all <select> attributes are supported, so careful attention to Best Practices and Options is advised. The styling of Select is difficult to control because many browsers have their own way of styling a <select> element, despite CSS. For users with javascript enabled, the Select component has been designed to be fully styled by CSS on any browser using progressive enhancement, providing a consistent presentation.

Example

Select using a default theme

Best practices

You can use the Select component in those instances when you are migrating code that used the HTML <select> element to implement a toggleable dropdown menu that allows the user to choose one value from a predefined list. Select is designed to mimic the HTML <select> element and has limitations based on how different browsers interpret the <select> element. Use <select> when you need to post information via a <form>.

One important limitation with the Select component is that there are some HTML <select> element attributes that are not directly supported. These include form, multiple, name, and size. More information is available in the Options section, below.

Select is a progressively enhanced component. This enhancement means that JavaScript is used to programmatically build & convert a <select> into a new menu. In this case, the <select> component will subscribe to Select Menu events which will propagate updates back to the native <select>. This behavior allows the <form> to function as expected.

Do

  • Use select when in the context of a form where the user must choose one from a list of options.
  • Define a name value for the drowpdown list using the id attribute.
  • Always assign a value to the aria-label attribute.
  • Use the option element to assign each option to the dropdown list. The coding order reflects the presentation order.

Don’t

  • Avoid placing the component in areas of the screen where the resulting menu collides with the edge of the browser window, such as in a footer. The dropdown list can run off of the edge of the window.
  • The use of an option group element to organize the option list is not supported.
  • Multiple option selection is not supported.
  • Defining the number of visible options in the dropdown list using the size attribute is not supported.

Also known as

Menu
Select
Select menu

Related

Menu
Select Button
Select menu (Deprecated)

Accessibility

  • Valid markup requires select to be used inside a form with a submit button.
  • Aria-label is required for select.

Options

The only options available for select are applied using attributes and CSS classes.

  • Focus: Add the attribute autofocus to automatically set focus on the component.
  • Required: Add the attribute required to make an option selection a required form field.
  • Disabled: Add the attribute disabled to disable the select menu.
  • Border: Add the class f-border to the select div element container with class c-select to add a border.
  • Scroll: Add the class f-scroll to the select div element when the option list exceeds 5 items.

Development

  • JavaScript: Scripting documentation defines how to handle this component through JavaScript.
  • Schema definition: The select schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default select

<div class="c-select">
    <label class="c-label" for="default">Label</label>
    <select id="default" aria-label="Default select menu">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

Accent select

<div class="c-select f-accent">
    <label class="c-label" for="accent">Label</label>
    <select id="accent" aria-label="Select menu with accent color">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

Default select with scroll

<div class="c-select f-scroll">
    <label class="c-label" for="scroll">Label</label>
    <select id="scroll" aria-label="Select menu. Scroll to see more selected options.">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
        <option>Option 6</option>
        <option>Option 7</option>
        <option>Option 8</option>
        <option>Option 9</option>
        <option>Option 10</option>
        <option>Option 11</option>
        <option>Option 12</option>
        <option>Option 13</option>
        <option>Option 14</option>
        <option>Option 15</option>
    </select>
</div>

Select disabled

<div class="c-select">
    <label class="c-label" for="disabled">Label</label>
    <select id="disabled" aria-label="Disabled select menu" disabled="disabled">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

Select menu with required attribute

<div class="c-select">
    <label class="c-label" for="required">Label</label>
    <select id="required" aria-label="Required select menu" required>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

Select menu with border

<div class="c-select f-border">
    <label class="c-label" for="border">Label</label>
    <select id="border" aria-label="Select menu with border">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

Select menu with action items


<div class="c-select">
    <label class="c-label" for=action>Label</label>
    <select id="action" aria-label="Select menu with actions">
        <option class="" >Option 1</option>
        <option class="" >Option 2</option>
        <option class="" >Option 3</option>
        <option class="f-context-action-trigger" >Option 4</option>
    </select>
</div>

Select menu with Image Thumbnails


<div class="c-select">
        <label class="c-label" for="icons">Label</label>
        <select id="icons" aria-label="Select menu with image thumbnails">
                <option class=""  data-icon="http://www.getmwf.com/images/components/social/facebook.png">Facebook</option>
                <option class=""  data-icon="http://www.getmwf.com/images/components/social/twitter.png">Twitter</option>
                <option class=""  data-icon="http://www.getmwf.com/images/components/social/linkedin.png">LinkedIn</option>
                <option class=""  data-icon="http://www.getmwf.com/images/components/social/skype.png">Skype</option>
        </select>
    </div>