${require('./_sidebar.html') active="dropdown-link"}

Dropdown

single / multi select dropdown, without JavaScript.

Usage notes

in order to use dropdown component, use role='list' on details tag.
no need to use javascript to close the dropdown when clicked outside.
for both single / multi-select case, need javascript to update summary tag text when any option selected.
in case of single select, remove open attribute on details tag using javascript when an option is selected.

              
                <!-- For Single-select -->
                <details role="list">
                  <summary aria-haspopup="listbox">Single select</summary>
                  <ul role="listbox">
                    <li>
                      <label for="01">
                        <input type="radio" id="01" name="option1" />
                        Option 1
                      </label>
                    </li>
                    <li>
                      <label for="02">
                        <input type="radio" id="02" name="option1" />
                        Option 2
                      </label>
                    </li>
                  </ul>
                </details>
  
  
                <!-- For Multi-select -->
                <details role="list">
                  <summary aria-haspopup="listbox">Multi select</summary>
                  <ul role="listbox">
                    <li>
                      <label for="01">
                        <input type="checkbox" id="01" name="option1" />
                        Option 1
                      </label>
                    </li>
                    <li>
                      <label for="01">
                        <input type="checkbox" id="02" name="option1" />
                        Option 2
                      </label>
                    </li>
                  </ul>
                </details>

${require('./_footer.html')}