Combobox

The combobox component is a text input with a dropdown list of options. It allows users to select one or more options from the list.

Important

Icons are not included in the combobox component. If you need to include an icon, you can use the Icon component.

SM
MD
Choose a fruit
  • Apples
  • Bananas
  • Oranges
  • Pears
  • Peaches
Choose a fruit
  • Apples
  • Bananas
  • Oranges
  • Pears
  • Peaches

Code

Code

<details class="backoffice-dropdown">
   <summary class="backoffice-combobox-trigger">
      <small>4+</small> <!-- <-- This is optional counter -->
      <span>Select an option</span>
   </summary>
   <ul class="backoffice-dropdown-content">
      <li class="backoffice-menuitem backoffice-menuitem-link backoffice-menuitem-active">Option 1</li>
      <li class="backoffice-menuitem backoffice-menuitem-link">Option 2</li>
      <li class="backoffice-menuitem backoffice-menuitem-link">Option 3</li>
      <li class="backoffice-menuitem backoffice-menuitem-link">Option 4</li>
   </ul>
</details>

Details

AttributeTypeDescription
.backoffice-combobox-trigger
component
Combobox trigger component
.backoffice-combobox-counter
component
Combobox counter component