A floating label dropdown is a modern UI design pattern where the label moves above the dropdown when a selection is made. This improves usability and enhances the user experience.

Dropdown With Floating Label

<div class="dropdown floating-form position--relative">
    <button type="button" class="dropdown__filter-selected position--relative display--block text--left" id="dropdown__filter-selected">Option 2</button>
    <div class="dropdown__options-filter position--absolute">
        <ul class="dropdown__select">
            <li class="dropdown__select-option p-x-10 active">Option 1</li>
            <li class="dropdown__select-option p-x-10">Option 2</li>
        </ul>
    </div>
    <label class="floating-label position--absolute">Floating label</label>
</div>