Dropdown

single / multi select dropdown, without JavaScript.

Single select

Option 1
Option 2

Multi-select

Option 1
Option 2

Usage notes

in order to use dropdown component, use role='dropdown' 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="dropdown">
                <summary>Single select</summary>
                <div>
                  <ul>
                    <li>
                      <input type="radio" id="01" name="option1" />
                      <label for="01">Option 1</label>
                    </li>
                    <li>
                      <input type="radio" id="02" name="option1" />
                      <label for="02">Option 2</label>
                    </li>
                  </ul>
                </div>
              </details>


              For Multi-select
              ===============================
              <details role="dropdown">
                <summary>Multi select</summary>
                <div>
                  <ul>
                    <li>
                      <input type="checkbox" id="01" name="option1" />
                      <label for="01">Option 1</label>
                    </li>
                    <li>
                      <input type="checkbox" id="02" name="option1" />
                      <label for="02">Option 2</label>
                    </li>
                  </ul>
                </div>
              </details>