layout | title |
---|---|
../../layouts/MainLayout.astro |
Select |
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.
<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>
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 |
|
Alt + Down Arrow | Opens the listbox without moving focus or changing selection. |
Up Arrow |
|
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 |
|
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.
Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish 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>