A listbox button is intended for use as a custom implementation of the native HTML select element's single -select use case.

Because a button element does not store form data, its value will not be submitted along with other form data without the assistance of JavaScript.

Unselected Listbox Button

By default, the listbox button is in an unselected state.

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.

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.

The following example shows the "floated label" version with a value selected.

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.

Borderless

Apply the btn--borderless modifier to create a borderless listbox button.

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 .

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.