Select list

Select one and only one


Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

How we use them

  • Use this when the user needs to see available options
  • This element must always be a child of a <form> element

How they look

Select list

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-select-list">
    <legend class="gg-c-select-list__legend">Select an option</legend>
      <ol class="gg-c-select-list__options">
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-1" class="gg-c-select-list__radio" value="option 1" checked>
              <label class="gg-c-select-list__button" for="option-1">
                  <span class="gg-c-select-list__button-text">
                      Option 1
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-2" class="gg-c-select-list__radio" value="option 2">
              <label class="gg-c-select-list__button" for="option-2">
                  <span class="gg-c-select-list__button-text">
                      Option 2
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-3" class="gg-c-select-list__radio" value="option 3">
              <label class="gg-c-select-list__button" for="option-3">
                  <span class="gg-c-select-list__button-text">
                      Option 3
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-4" class="gg-c-select-list__radio" value="option 4">
              <label class="gg-c-select-list__button" for="option-4">
                  <span class="gg-c-select-list__button-text">
                      Option 4
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-5" class="gg-c-select-list__radio" value="option 5">
              <label class="gg-c-select-list__button" for="option-5">
                  <span class="gg-c-select-list__button-text">
                      Option 5
                  </span>
              </label>
          </li>
      </ol>
  </fieldset>
</form>

Select list with more options

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-select-list">
    <legend class="gg-c-select-list__legend">Select an option</legend>
      <ol class="gg-c-select-list__options">
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-1" class="gg-c-select-list__radio" value="option 1" checked>
              <label class="gg-c-select-list__button" for="option-1">
                  <span class="gg-c-select-list__button-text">
                      Option 1
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-2" class="gg-c-select-list__radio" value="option 2">
              <label class="gg-c-select-list__button" for="option-2">
                  <span class="gg-c-select-list__button-text">
                      Option 2
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option">
              <input name="option" type="radio" id="option-3" class="gg-c-select-list__radio" value="option 3">
              <label class="gg-c-select-list__button" for="option-3">
                  <span class="gg-c-select-list__button-text">
                      Option 3
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option  gg-c-select-list__option--additional" style="--animation-order: 1;">
              <input name="option" type="radio" id="option-4" class="gg-c-select-list__radio" value="option 4">
              <label class="gg-c-select-list__button" for="option-4">
                  <span class="gg-c-select-list__button-text">
                      Option 4
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option  gg-c-select-list__option--additional" style="--animation-order: 2;">
              <input name="option" type="radio" id="option-5" class="gg-c-select-list__radio" value="option 5">
              <label class="gg-c-select-list__button" for="option-5">
                  <span class="gg-c-select-list__button-text">
                      Option 5
                  </span>
              </label>
          </li>
          <li class="gg-c-select-list__option gg-c-select-list__option--additional" style="--animation-order: 3;">
              <input name="option" type="radio" id="option-6" class="gg-c-select-list__radio" value="option 6">
              <label class="gg-c-select-list__button" for="option-6">
                  <span class="gg-c-select-list__button-text">
                      Option 6
                  </span>
              </label>
          </li>
      </ol>

      <button type="button" class="gg-c-select-list__expand"><!-- type="button" prevents form from being submitted-->
          More options
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-select-list__expand__icon">
            <path d="M19.51,6.85c-1.3,1.2-2.1,2.3-3.4,3.5a3.74,3.74,0,0,0-.7.6c-.7.7-1.2,1.1-1.8,1.8L12,14.35l-.6-.6c-2.1-2.4-4.7-4.4-7-6.7a.48.48,0,0,0-.7,0,7.69,7.69,0,0,0-1.8,1.8c-.1.2,0,.3.1.5v.1c.2.6,1,1.1,1.5,1.6,1.3,1.3,2.7,2.6,4.1,4s2.5,2.7,3.9,3.9l.1.1a.48.48,0,0,0,.7,0c1.6-1.6,3.4-3.1,5-4.7s3.1-3.3,4.7-4.9a.48.48,0,0,0,0-.7l-1.9-1.9C20,6.65,19.71,6.65,19.51,6.85Z"/>
          </svg>
      </button>
  </fieldset>
</form>

<script>
  (() => {
    const selectList= document.querySelector('.gg-c-select-list')
    const moreOptions = document.querySelector('.gg-c-select-list__expand')

    moreOptions.onclick = ()=> {
      selectList.classList.add('gg-c-select-list--show-additional');
    }
  })();
</script>