Selects

Form elements that are used to select one or more values from predefined data sets.

Coded Components

Helper classes: Looking for a complete list of helper classes for these components?View helper classes

Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.

Standard Select List

<div class="dds__form-group"> <label for="exampleFormControlSelect3">Example select title</label> <select class="dds__form-control" id="exampleFormControlSelect3"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option disabled="">Option 5 (disabled example)</option> </select> </div>

Disabled Select List

<div class="dds__form-group"> <label for="exampleFormControlSelectDisabled">Example select title</label> <select class="dds__form-control" id="exampleFormControlSelectDisabled" disabled=""> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div>

Tiered Select List

<div class="dds__form-group"> <label for="exampleFormControlSelect5">Example select label</label> <select class="dds__form-control" id="exampleFormControlSelect5"> <option label="Tier 1" value="1">Tier 1 option</option> <optgroup class="dds__font-italic" label="Tier 2 group label"> <option label="Tier 2 option" value="2">Tier 2 grouped option</option> <option label="Tier 2 option" value="2">Tier 2 grouped option</option> </optgroup> <optgroup class="dds__font-italic" label="Tier 2 group label"> <option disabled label="Tier 2 option" value="2">Tier 2 grouped option (disabled example)</option> <option label="Tier 2 option" value="2">Tier 2 grouped option</option> </optgroup> <option disabled label="Option 5" value="5">Option 5 (disabled example)</option> </select>
</div>

Horizontal Spin Box Select

<div> <div class="dds__spinbox-horizontal" data-toggle="dds__spinbox"> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__minus-minimize" class="dds__svg-icons-item"></use> </svg> </button> <input class="dds__form-control dds__spinbox-input" role="spinbutton" aria-label="spinbox horizontal"></input> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__plus-add" class="dds__svg-icons-item"></use> </svg> </button>
</div>

Horizontal Spin Box Select with Step 3

<div> <div class="dds__spinbox-horizontal" data-toggle="dds__spinbox" data-spinstep="3"> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__minus-minimize" class="dds__svg-icons-item"></use> </svg> </button> <input class="dds__form-control dds__spinbox-input" role="spinbutton" aria-label="spinbox horizontal"></input> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__plus-add" class="dds__svg-icons-item"></use> </svg> </button>
</div>

Vertical Spin Box Select

<div class="dds__spinbox-vertical" data-toggle="dds__spinbox" data-spinmin="0" data-spinmax="50" data-spinstep="1" data-spindefault="5"> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__plus-add" class="dds__svg-icons-item"></use> </svg> </button> <input class="dds__form-control dds__spinbox-input" role="spinbutton" aria-label="spinbox vertical"></input> <button class="dds__spinbox-btn" tabindex="-1"> <svg focusable="false" class="dds__svg-icons"> <use xlink:href="#dds__minus-minimize" class="dds__svg-icons-item"></use> </svg> </button>
</div>

Date Select

<form data-toggle="dds__form-validation" novalidate> <div class="dds__datepicker" data-toggle="dds__datepicker" data-target="#myCalendar"> <label for="datepicker-input">Date Select Label</label> <div class="dds__form-group dds__datepicker-form"> <input type="text" class="dds__form-control dds__input-masked dds__datepicker-input" placeholder="__/__/____" pattern="(0[1-9]|1[0-2])\/([0-2]{1}[0-9]{1}|[3]{1}[0-1]{1})\/[0-9]{4}" data-charset="XX/XX/XXXX" maxlength="10" name="date" id="datepicker-input" required aria-invalid="false" aria-describedby=""> <button class="dds__datepicker-btn" aria-label="select date" type="button"> <svg class="dds__calendar" aria-hidden="true" focusable="false"><use xlink:href="#dds__calendar"></use></svg> </button> </div> <small class="dds__form-text dds__text-muted"> Date format mm/dd/yyyy. </small> <div class="dds__invalid-feedback" id="datepicker-inputFeedback"> Please enter a valid date. </div> <div id="myCalendar" class="dds__datepicker-calendar dds__d-none" tabindex="0"></div> </div>
</form>

Bar Select

<div> <form class="dds__d-flex" data-toggle="dds__bar-select"> <div class="dds__bar-select" tabindex="-1"> <input id="bar1" class="dds__sr-only" value="1" type="radio" name="bar-select"> <label aria-label="Bar Select" for="bar1"></label> </div> <div class="dds__bar-select" tabindex="-1"> <input id="bar2" class="dds__sr-only" value="2" type="radio" name="bar-select"> <label aria-label="Bar Select" for="bar2"></label> </div> <div class="dds__bar-select" tabindex="-1"> <input id="bar3" class="dds__sr-only" value="3" type="radio" name="bar-select"> <label aria-label="Bar Select" for="bar3"></label> </div> <div class="dds__bar-select" tabindex="-1"> <input id="bar4" class="dds__sr-only" value="4" type="radio" name="bar-select"> <label aria-label="Bar Select" for="bar4"></label> </div> <div class="dds__bar-select" tabindex="-1"> <input id="bar5" class="dds__sr-only" value="5" type="radio" name="bar-select"> <label aria-label="Bar Select" for="bar5"></label> </div>
</form> </div>

Usage

The values within a select list should be sorted in an easily scannable order (e.g. alphabetically or by popularity).

Most selects start with no selection other than a neutral default so that users are more aware of the decision.

Select List

By default, the first option in a select list is selected, and this is a neutral instruction such as "Choose one".

The <select> element</select> is used to create a drop-down list.

The <option> tags</option> inside the <select> element define the available options in the list.</select>

Keyboard Operation

While dropdown is closed:

  • Tab = Select the next focusable element outside of the dropdown.
  • Shift + Tab = Select the previous focusable element outside of the dropdown.
  • Return/Enter/Space/Down Arrow = Open the dropdown with the first option selected.
  • Up Arrow = Open the dropdown with the last option selected.

While dropdown is open:

  • Down Arrow = Put the next option in focus.
  • Up Arrow = Put the previous option in focus.
  • Home = Scroll to the top and put the first option in focus.
  • End = Scroll to the bottom and put the last option in focus.
  • Return/Enter = Select the currently highlighted option and then close the dropdown.
  • Tab = Close the dropdown and select the next focusable element outside of it.
  • Shift + Tab = Close the dropdown and select the previous focusable element outside of it.
  • Esc = Select the first (default) option and close the dropdown.

Spin Box Select

Spin boxes are comprised of three components, including an editable input field that displays the current value, an increment button, and a decrement button.

It's advisable to use spin box select when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, when selecting a range from 0 to 59 for setting the minutes values on a clock, it would perform better as a spin box rather than a lengthy select list.

If the range is large, a spin box may support changing the value in both small and large increments. In the clock example, the user may be able to move by 1 minute with Up Arrow and Down Arrow, and by 10 minutes with Page Up and Page Down.

Keyboard Operation

While spin box is in focus:

  • Up Arrow = Increase the value.
  • Down Arrow = Decrease the value.
  • Home = Sets the value to its minimum, if any.
  • End = Sets the value to its maximum, if any.
  • Page Up (Optional) = Increase the value by a larger step than Up Arrow.
  • Page Down (Optional) = Decrease the value by a larger step than Down Arrow.

For the input field component:

  • Type characters within the input. Most implementations allow only certain characters as part of the value and prevent input of any other characters. For example, a clock would allow only integer values from 0 to 59, the colon ':', and the letters 'AM' and 'PM'.
  • Any non-allowed character input should not change the contents of the input field nor the value of the spin box.
  • Include standard keyboard operation for input, cursor movement, selection, and text manipulation.
  • Standard key assignments for editing functions are specific to the device operating system.
  • The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
  • JavaScript should not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.

Date Select

The date select consists of an input field and a datepicker component.

The datepicker should never be required for selecting a date. There should always be an input field for direct entry.

Ensure that the required format for the date is specified in the label.

It should be possible to select a date via keyboard. For example, by using tab to put the datepicker in focus and using arrow keys to pick the right date.

Keyboard Operation

While the datepicker calendar view is open:

  • Left = Move focus to the previous day. Will move to the last day of the previous month, if the current day is the first day of a month.
  • Right = Move focus to the next day. Will move to the first day of the following month, if the current day is the last day of a month.
  • Up = Move focus to the same day of the previous week. Will wrap to the appropriate day in the previous month.
  • Down = Move focus to the same day of the following week. Will wrap to the appropriate day in the following month.
  • PgUp = Move focus to the same date of the previous month. If that date does not exist, focus is placed on the last day of the month.
  • PgDn = Move focus to the same date of the following month. If that date does not exist, focus is placed on the last day of the month.
  • Alt+PgUp = Move focus to the same date of the previous year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Alt+PgDn = Move focus to the same date of the following year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Home = Move to the first day of the month.
  • End = Move to the last day of the month
  • Tab / Shift+Tab = If the datepicker is in modal mode, navigate between the calendar grid and the close/previous/next selection buttons, otherwise move to the field following/preceding the input field associated with the datepicker
  • Enter / Space = Fill the input field with the selected date and then close the datepicker widget.
  • Escape = Close the datepicker without making a selection.

Bar Select

A bar select may initiate with no value or a preset value.

Users click on a bar to select a value within the range. The bars visually fill up to that selection point in the manner of a gauge.

Once a value has been selected then a user can change their selection but has no method to return to a no value state. Bar selects are meant to capture user perspectives, so they fail to serve their purpose when they don't do this.

Do's and Don'ts

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Accessibility

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

You may also refer to this article about creating accessible forms from WebAIM.

Select List

The A11Y Style Guide has excellent examples of markup for select lists.

Please follow the best practices for a listbox from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for a listbox from WAI-ARIA 1.1.

You may refer to this example of a collapsible dropdown listbox from WAI-ARIA practices 1.1.

Tiered Select List

The A11Y Style Guide has excellent examples of markup for select lists with grouping/tiers.

See the group role in WAI-ARIA 1.1.

You may also refer to these tutorials for grouping items in select elements from Web Accessibility Tutorials.

See also this article about grouping options in select menus from WebAIM.

Spin Box Select

Please follow the best practices for a spinbutton from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for a spinbutton from WAI-ARIA 1.1.

You may refer to this example of a date picker spin button from WAI-ARIA practices 1.1.

Date Select

Please follow the best practices for a non-modal dialog and the best practices for grids from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for non-modal dialogs, these recommendations for grids and recommendations for the aria-current state from WAI-ARIA 1.1.

You may refer to this example of a date picker dialog from WAI-ARIA practices 1.1.

Bar Select

Please refer to the accessibility guidelines for radio buttons.

See also this Web Accessibility Tutorial for a star rating.