showcar-ui/src/06-components/atoms/custom-dropdown/docs/custom-dropdown-default.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<h4 class="sc-font-l sc-padding-bottom-xl">Custom dropdown without scrollbar</h4>
<custom-dropdown class="sc-input" checkboxgroup tabindex="0">
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd100" class="sc-input">
        <label for="cd100">Value1</label>
        <input type="checkbox" id="cd200" class="sc-input">
        <label for="cd200">Value2</label>
        <input type="checkbox" id="cd300" class="sc-input">
        <label for="cd300">Value2</label>
    </div>
</custom-dropdown>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- -->

<h4 class="sc-font-l sc-padding-bottom-xl">Custom dropdown with scrollbar</h4>
<custom-dropdown class="sc-input" scrollable checkboxgroup tabindex="0">
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd1" class="sc-input">
        <label for="cd1">Value1</label>
        <input type="checkbox" id="cd2" class="sc-input">
        <label for="cd2">Value2</label>
        <input type="checkbox" id="cd3" class="sc-input">
        <label for="cd3">Value3</label>

        <input type="checkbox" id="cd4" class="sc-input">
        <label for="cd4">Value4</label>
        <input type="checkbox" id="cd5" class="sc-input">
        <label for="cd5">Value5</label>
        <input type="checkbox" id="cd6" class="sc-input">
        <label for="cd6">Value6</label>

        <input type="checkbox" id="cd7" class="sc-input">
        <label for="cd7">Value7</label>
        <input type="checkbox" id="cd8" class="sc-input">
        <label for="cd8">Value8</label>
        <input type="checkbox" id="cd9" class="sc-input">
        <label for="cd9">Value9</label>

        <input type="checkbox" id="cd10" class="sc-input">
        <label for="cd10">Value10</label>
        <input type="checkbox" id="cd11" class="sc-input">
        <label for="cd11">Value11</label>
        <input type="checkbox" id="cd12" class="sc-input">
        <label for="cd12">Value12</label>

        <input type="checkbox" id="cd13" class="sc-input">
        <label for="cd13">Value13</label>
        <input type="checkbox" id="cd14" class="sc-input">
        <label for="cd14">Value14</label>
        <input type="checkbox" id="cd15" class="sc-input">
        <label for="cd15">Value15</label>

        <input type="checkbox" id="cd16" class="sc-input">
        <label for="cd16">Value16</label>
        <input type="checkbox" id="cd17" class="sc-input">
        <label for="cd17">Value17</label>
        <input type="checkbox" id="cd18" class="sc-input">
        <label for="cd18">Value18</label>

        <input type="checkbox" id="cd19" class="sc-input">
        <label for="cd19">Value19</label>
        <input type="checkbox" id="cd20" class="sc-input">
        <label for="cd20">Value20</label>
        <input type="checkbox" id="cd21" class="sc-input">
        <label for="cd21">Value21</label>

        <input type="checkbox" id="cd22" class="sc-input">
        <label for="cd22">Value22</label>
        <input type="checkbox" id="cd23" class="sc-input">
        <label for="cd23">Value23</label>
        <input type="checkbox" id="cd24" class="sc-input">
        <label for="cd24">Value24</label>
    </div>
</custom-dropdown>