Go to github repo github logo

Select

Edit this page on GitHub

cc-select functionality is similar to an HTML select element. The select options listbox can be opened when clicking, pressing up and down arrow keys.

For cc-option, you need to add a aria-selected="true" to indicate that option is selected initially.

Monday Tuesday Wednesday Thursday Friday Saturday Sunday 
<cc-select>
  <cc-option value="monday" text="Monday" aria-selected="true"></cc-option>
  <cc-option value="tuesday" text="Tuesday"></cc-option>
  <cc-option value="wednesday" text="Wednesday"></cc-option>
  <cc-icon icon="chevron-down" slot="suffix"></cc-icon>
</cc-select>

Helper Text

Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Copyright Ā© 2023 W3CĀ®. This software or document includes material copied from or derived from Select-Only Combobox Example (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).

Key Function
Down Arrow
  • Opens the listbox if it is not already displayed without moving focus or changing selection.
  • DOM focus remains on the combobox.
Alt + Down Arrow Opens the listbox without moving focus or changing selection.
Up Arrow
  • First opens the listbox if it is not already displayed and then moves visual focus to the first option.
  • DOM focus remains on the combobox.
Enter Opens the listbox without moving focus or changing selection.
Space Opens the listbox without moving focus or changing selection.
Home Opens the listbox and moves visual focus to the first option.
End Opens the listbox and moves visual focus to the last option.
Printable Characters
  • First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
  • If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
  • If the same character is typed in succession, visual focus cycles among the options starting with that character.

Disabled

This disabled Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled.

First one here is a native `select` element.

Monday Tuesday Wednesday Thursday Friday Saturday Sunday 
<form onsubmit="alert(new FormData(this).get('start-of-week')); return false;">
  <p>First one here is a native `select` element.</p>
  <label for="pet-select">Choose a pet:</label>
  <select name="pets" id="pet-select" disabled>
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>
  </select>
  <cc-divider></cc-divider>
  <cc-select label="Start of the week" name="start-of-week" disabled>
    <cc-option value="monday" aria-selected="true">Monday</cc-option>
    <cc-option value="tuesday">Tuesday</cc-option>
    <cc-option value="wednesday">Wednesday</cc-option>
    <cc-option value="thursday">Thursday</cc-option>
    <cc-option value="friday">Friday</cc-option>
    <cc-option value="saturday">Saturday</cc-option>
    <cc-option value="sunday">Sunday</cc-option>
  </cc-select>
</form>
Monday Tuesday Wednesday Thursday Friday Saturday Sunday Submit