select

Select element presents a menu of options. For selecting multiple options, see Dueling Picklist.

Select Label

About Select

The HTML <select> element presents a menu of options. The options within the menu are represented by <option> elements that you can group with <optgroup> elements. You can pre-select options for the user.

For selecting multiple options, we have created a custom component called the Dueling Picklist to ensure Accessibility and ease-of-use. Please refer to that documentation for the interaction model, markup, and Accessibility requirements.

Base

Select Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">

States

Error

* Select Label

This field is required

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="select-01">
    <abbr class="slds-required" title="required">* </abbr>Select Label</label>

Disabled

Select Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">

Examples

Required

* Select Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">
    <abbr class="slds-required" title="required">* </abbr>Select Label</label>

Multiple Selection

Select Options

Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.

First Category

Second Category

<div class="slds-form-element" role="group" aria-labelledby="picklist-group-label">
  <span id="picklist-group-label" class="slds-form-element__label slds-form-element__legend">Select Options</span>
  <div class="slds-form-element__control">

Multiple Selection Narrow

Select Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">