Dropdown Select

Preview:

Configuration:

Output:

Vue component

            
<DropdownSelect
    v-for="item in selectList"
    :key="item.id"
    :placeholder="item.placeholder"
    :options="item.options"
    :disabled="false"
    :required="false"
    :hasError="false"
    :mobile="true"
/>

data() {
    return {
        selectList: [
            {
                placeholder: "Dropdown select",
                options: [
                    { text: "option1", value: "option1" },
                    { text: "option2", value: "option2" },
                    { text: "option3", value: "option3" },
                    { text: "option4", value: "option4" },
                ],
            },
            ...
        ],
    };
},
            
        

Raw HTML

            
<div class="dropdown-select form-group mobile-enabled">
    ....
    ....
</div>

            
        

Comments

This component can only be used as a vue component

Enabled on mobile means that the custom select-list is shown on mobile devices. Otherwise the default <select> will be shown instead.