Listbox Button Component
Unselected Listbox Button
By default, the listbox button is in an unselected state.
Red
Blue
Yellow
Green
<span class="listbox-button">
<button
class="btn btn--form"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Color: </span>
<span class="btn__text"> - </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
To give the illusion of a floated label use the btn--floating-label and btn__floating-label classes.
NOTE : a btn__floating-label--inline class must also be toggled with JavaScript. It should be present when there is no selection, and vice versa.
Red
Blue
Yellow
Green
<span class="listbox-button">
<button
class="btn btn--form btn--floating-label"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__floating-label"> Color </span>
<span class="btn__text" />
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
Selected Listbox Button
A selection can be made by applying the aria-selected state to a single option; JavaScript is required to update all ARIA and button text state.
Red
Blue
Yellow
Green
<span class="listbox-button">
<button
class="btn btn--form"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Color: </span>
<span class="btn__text"> Blue </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
The following example shows the "floated label" version with a value selected.
Red
Blue
Yellow
Green
<span class="listbox-button">
<button
class="btn btn--form btn--floating-label"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__floating-label"> Color: </span>
<span class="btn__text"> Blue </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
Listbox Button with option description
You can also add a description to each option by using .listbox-button__description
In order to make the description accessible, you need to add a clipped punctuation marker. This ensures screen readers will read the subtitle as a separate sentence.
Red. This is a red color
Blue. This is a blue color
Yellow. This is a yellow color
Green. This is a green color
<span class="listbox-button">
<button
class="btn btn--form"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Color: </span>
<span class="btn__text"> - </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
Borderless
Apply the btn--borderless modifier to create a borderless listbox button.
1
2
3
<span class="listbox-button">
<button
class="btn btn--borderless"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Quantity: </span>
<span class="btn__text"> 1 </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> 1 </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> 2 </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> 3 </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
Error State
Apply the listbox-button--error modifier to create a listbox button in an error state.
This is a simple example with a simple error indication. For usage of the error state with an error message, please see the field module .
Red
Blue
Yellow
Green
<span class="listbox-button listbox-button--error">
<button
class="btn btn--form"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Color: </span>
<span class="btn__text"> - </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
Form Variant
Apply the listbox-button--form modifier to create a listbox button inside a form matching other form controls.
Additionally, to allow the component to send the value from a selected option in a form submission, there needs to be custom js to populate the select.listbox__native with the value upon selection. If using Skin outside of eBay UI, you will need to account for that independantly.
NOTE: This component is a bit in transiton and will likely undergo some changes to integrate and simplify the variant implementation. Currently, .listbox-button--form is used as a bit of a patch to create the form variant of the control. It adds some of the styles needed to do form variant styling while other styles are applied separately by .btn--form . In the future, these styles will be consolidated into .btn--form and will be .listbox-button--form will be phased out.
Red
Blue
Yellow
Green
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form"
style="min-width: 150px"
aria-expanded="false"
aria-haspopup="listbox"
>
<span class="btn__cell">
<span class="btn__label"> Color: </span>
<span class="btn__text"> - </span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox" tabindex="0">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Red </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Blue </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-disabled="true">
<span class="listbox-button__value"> Yellow </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value"> Green </span>
<svg class="icon icon--16" height="10" width="14">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
<select hidden class="listbox__native">
<option value="1" />
<option value="2" />
<option value="3" />
<option value="4" />
</select>
</span>