+
+
+ Dropdowns
+ Dropdown menus and custom selects without JavaScript.
+
+ Dropdowns are built with <details role ="list" > as a wrapper and <summary > and <ul > as direct childs.
+ For style consistency with the form elements, dropdowns are styled as a <select >
+
+
+ Dropdown
+
+
+
+ Select
+
+
+
+<!-- Dropdown -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" >Dropdown</summary >
+ <ul role ="listbox" >
+ <li ><a >Mauris vehicula velit</a ></li >
+ <li ><a >Nunc dignissim sapien</a ></li >
+ <li ><a >Aenean egestas quam</a ></li >
+ </ul >
+</details >
+
+<!-- Select -->
+<select >
+ <option value ="" disabled selected >Select</option >
+ <option >…</option >
+</select >
+
+
+ role ="button" <summary > element can be used to turn the dropdown into a button.
+
+
+ Dropdown as a button 1
+
+
+
+ Dropdown as a button 2
+
+
+
+ Dropdown as a button 3
+
+
+
+
+<!-- Primary -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" role ="button" >
+ Dropdown as a button 1
+ </summary >
+ <ul role ="listbox" >
+ …
+ </ul >
+</details >
+
+<!-- Secondary -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" role ="button" class ="secondary" >
+ Dropdown as a button 2
+ </summary >
+ <ul role ="listbox" >
+ …
+ </ul >
+</details >
+
+<!-- Contrast -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" role ="button" class ="contrast" >
+ Dropdown as a button 3
+ </summary >
+ <ul role ="listbox" >
+ …
+ </ul >
+</details >
+
+
+ Dropdowns can be used as custom selects with <input type ="radio" > or <input type ="checkbox" >
+
+
+ Select single element
+
+
+
+ Select multiple elements
+
+
+
+
+<!-- With radio buttons -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" >Dropdown</summary >
+ <ul role ="listbox" >
+ <li >
+ <label for ="small" >
+ <input type ="radio" id ="small" name ="size" value ="small" >
+ Small
+ </label >
+ </li >
+ <li >
+ <label for ="medium" >
+ <input type ="radio" id ="medium" name ="size" value ="medium" >
+ Medium
+ </label >
+ </li >
+ <li >
+ <label for ="large" >
+ <input type ="radio" id ="large" name ="size" value ="large" >
+ Large
+ </label >
+ </li >
+ </ul >
+</details >
+
+<!-- With checkboxes -->
+<details role ="list" >
+ <summary aria-haspopup ="listbox" >Dropdown</summary >
+ <ul role ="listbox" >
+ <li >
+ <label >
+ <input type ="checkbox" >
+ Banana
+ </label >
+ </li >
+ <li >
+ <label >
+ <input type ="checkbox" >
+ Watermelon
+ </label >
+ </li >
+ <li >
+ <label >
+ <input type ="checkbox" >
+ Apple
+ </label >
+ </li >
+ </ul >
+</details >
+
+
+
+
+
+ ${require('./_footer.html')}
+
+