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.
While using input type="number"
users could accidentally increase or decrease the number using the
scroll wheel on the mouse or the scroll gesture on their trackpad. This
feature can be useful when collecting countable data but bad if entering
data such as passport numbers. We have switched to
input type="text" inputmode="numeric" pattern="[0-9]*"
because it allows for a degree of separation between how the user enters
data (“input mode”), what the browser expects the user input to contain
(type equals number), and potentially how it tries to validate it.
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 demoView 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 demoView 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>