Component Blueprints

Select

  • HTML/CSS:Dev Ready
  • Layout:Responsive

Sections

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

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#

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

States#

Error#

Select an option.
<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>
  <div class="slds-form-element__control">

Disabled#

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

Examples#

Required#

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

Multiple Selection#

Select Options
Press space bar when on an item, to move it within the list. Cmd/Ctrl 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">
    <div class="slds-dueling-list">

Multiple Selection Narrow#

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

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

CategoryStyling Hook NameValue Type(s)Fallback Value
Box Shadow
--slds-c-select-shadow
String
--slds-c-select-shadow-focus
String0 0 3px #0176d3
Color
--slds-c-select-color-background
Color100, white
--slds-c-select-color-background-focus
Color100, white
--slds-c-select-color-border
Color4, #c9c9c9
--slds-c-select-color-border-focus
Color60, #1b96ff
--slds-c-select-text-color
Color
--slds-c-select-text-color-focus
Color
Radius
--slds-c-select-radius-border
Dimension0.25rem

Overview of CSS Classes#

Selector.slds-select
Summary

Initializes select

Supportdev-ready
Restrictselect
VariantTrue

Select Release Notes

2.17.0

Added

  • Added slds as the default namespace with sds fallbacks for Styling Hooks.

2.14.0

Added

  • Enabled styling hooks for select. See select's styling hooks overview table for a full listing of the currently available hooks.

2.13.1

Fixed

  • Small improvements to the UI text.

2.8.4

Fixed

  • Adjusted pseudo elements to allow click events to pass through